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清华 社 大 系 
网 绍 开发 视频 大 讲堂 


移动 端 /PC 端 同步 学 习 ，QQ 和 群 / 微 信 群 随时 答疑 。 


速 查 、 高 效 、 实 用 ， 增 强 实战 能 力 。 


先 观摩 ， 再 临摹 ， 高 手 案头 常备 ， 随 时 查阅 提升 。 


A i lb 


随 用 随 取 ， 提 升 设计 效率 ， 快 速 进 阶 开发 高 手 行列 。 


CSS3+DIV 


网 页 样式 与 布局 


前 端 科技 昌 纺 将 


全 教学 微 视频 ( 229 节 ) 全 前 端 案例 资源 库 ( 4900 个 ) 
@ 在 线 微 练习 ( 269 项 ) @ 面 试题 库 ( 1036 道 ) 
@ 实 例 源 代码 ( 220 项 ) @ 网 页 模板 库 ( 1500 套 ) 


@ 设 计 素 材 库 ( 12000 个 ) 


清华 大 学 出 版 社 





党 人 清华 社 “视频 大 讲 刘 ”天 未 
网 络 天 友 秽 频 大 坪 蔚 


CSS3+DIV 网 页 样式 与 布局 从 入 门 到 精通 
( 微 课 精 编 版 ) 


前 端 科技 ”编著 


清华 大 学 出 版 社 
北 系 


内 容 简 介 


《CSS3+DIV 网 页 样式 与 布局 从 入 门 到 精通 〈 微 课 精 编 版 )》 从 初学 者 角度 出 发 ， 通 过 通俗 易 懂 的 语言 、 丰 
富 多 彩 的 实例 ， 详 细 介绍 了 CSS3+DIV 前 端 开 发 技术 及 其 应 用 。 本 书 共 16 章 ， 包 括 CSS3 基础 、 使 用 CSS3 选 
择 器 、 使 用 CSS 美化 网 页 文本 、 使 用 CSS 美化 图 像 、 使 用 CSS 美化 超 链接 、 使 用 CSS 美化 列表 、 使 用 CSS 美 
化 表格 、 使 用 CSS 美化 表单 、 使 用 DIV+CSS 设计 网 页 、 使 用 HTML5+CSS3 设计 网 页 、 使 用 CSS3 设计 弹性 布 
局 、 使 用 CSS3 设计 动态 样式 、 使 用 CSS3 设计 啊 应 式 页 面 、 使 用 JavaScript 控制 CSS 样式 、 团 购 类 型 网 站 的 
布局 与 设计 、 掘 客 类 型 网 站 的 布局 与 设计 等 内 容 。 书 中 所 有 知识 都 结合 具体 实例 进行 介绍 ， 代 码 注 释 详尽 ， 读 
者 可 轻松 掌握 前 端 技术 精髓 ， 提 升 实际 开发 能 力 。 

除 纸 质 内 容 外 ， 本 书 还 配备 了 多 样 化 、 全 方位 的 学 习 资 源 ， 主 要 内 容 如 下 。 

229 节 同 步 教 学 微 视频 15000 项 设计 素材 资源 

220 项 实例 源 代码 4800 个 前 端 开 发 案例 

334 个 实例 案例 分 析 48 本 权威 参考 学 习 手 册 

269 个 在 线 微 练习 1036 道 企 业 面 试 真题 

本 书 可 作为 前 端 开 发 、 移 动 开 发 入 门 者 的 自学 用 书 ， 也 可 作为 高 等 院 校 及 相关 培训 机 构 的 教学 参考 用 书 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防 伪 标 签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 (CIP) 数据 


CSS3+DIV 网 页 样式 与 布局 从 入 门 到 精通 : 微 课 精 编 版 /前 端 科技 编著 . 一 北京 : 清华 大 学 出 版 社 ，2018 
(清华 社 “ 视 频 大 讲堂 ”大 系 网 络 开 发 视频 大 讲堂 ) 


ISBN 978-7-302-50199-2 


I .QC… .前 … HI. 网 页 制作 工具 IV. CDTP393.092.2 


中 国 版 本 图 书馆 CIP 数据 核 字 (2018) 第 114530 号 


责任 编辑 : 机 小 红 
封面 设计 : 李 志 伟 
版 式 设计 : 楠 竹 文化 
责任 校对 : 毛 姗 姗 
责任 印 制 | : 
出 版 发 行 : 清华 大 学 出 版 社 
网 址 : http://www.tup.com.cn, http://www.wqbook.com 
地 址 : 北京 清华 大 学 学 研 大 厦 A 座 邮 编 : 100084 
社 总 机 : 010-62770175 邮 ” 购 : 010-62786544 
投稿 与 读者 服务 : 010-62776969，c-serviceQ@tup.tsinghua.edu.cn 
质量 反馈 : 010-62772015，zhiliang@tup.tsinghua.edu.cn 
印 刷 者 : 
装 订 者 : 
经 销 : 全 国 新 华 书店 
开 ”本 : 203mmX260mm 印 ” 张 : 34.75 字 数 : 905 干 字 
版 ”次 : 2018 年 12 月 第 1 版 印 ”次 : 2018 年 12 月 第 1 次 印刷 
定 价 : 89. 80 元 
产品 编号 : 078929-01 


如 何 使 用 本 书 


本 书 提供 了 多 样 化 、 全 方位 丰富 的 学 习 资 源 ， 帮 助 读者 轻松 掌握 CSS3+DIV 技术 ， 从 小 日 快速 


前 端 开发 百 问 百 答 


成 长 为 前 剖 开 发 高 手 。 





视频 讲解 在 线 练习 


手机 端 +PC 端 ， 线 上 线 下 同步 学 习 


1. 获取 学 习 权 限 


学 习 本 书 前 ， 请 先 刊 开 图 书 封底 的 二 维 码 洲 层 ， 使 用 手机 扫描 ， 即 可 获取 本 书 资源 的 学 习 权 限 。 
再 扫 摘 正文 章节 对 应 的 二 维 码 ， 怠 可 以 观看 视频 讲解 和 在 线 练习 提升 ， 全 程 易 全 、 好 学 、 速 得 、 高 
效 、 实 用 。 


刮 开 涂 层 ,扫描 获取 学 习 权 限 





2. 观看 视频 讲解 


对 于 初学 者 来 说 ， 精 彩 的 知识 讲解 和 透彻 的 实例 解析 能 够 引导 其 快速 入 门 ， 轻 松 理 解 和 掌握 知 
识 要 点 。 本 书 中 几乎 所 有 案例 部 录制 了 视频 ， 可 以 使 用 手机 在 线 观 看 ， 也 可 以 离线 观看 ， 还 可 以 推 
送 到 计算 机 上 大 屏幕 观看 。 
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下 载 视频 至 手机 ， 推送 视频 至 邮箱 ， 
离线 流畅 观看 随时 PC 端 观看 





3. 进行 线 上 练习 


为 方便 读者 巩固 基础 知识 ， 提 升 实战 能 力 ， 本 书 附 赠 了 大 量 的 前 端 练习 题目 。 读 者 扫描 各 章 最 
后 的 “在 线 练习 ”二 维 码 ， 即 可 通过 反复 的 实 操 训 练 加 深 对 知识 的 领悟 程度 。 


1 一 
| Xx 课 后 练习 
| | 


| qianduankaif 




















1 和 

' 上】 <div> 这 篡 文字 使 用 的 是 徐 静 攻 字体 。 | 

! 乏 习 使 用 CSS 设 计 各 种 网 页 文本 效果 ， | </qiv> 1 

以 及 各 种 网 页 特效 版 式 和 文本 ， 强 化 基本 功 1 ”<br> 这 段 文字 使 用 的 是 默认 字体 

| 1 

1 

1 n 

1 

1 CSS 1 

| | 

| erfont-face 1 ! 

入 拒 ， 1 font~family: xujinglei} a 

| src: url('xujinglei.ttf'), | 

立 本 编 | url( "xujinglei .eot")}; IE9+ | 

1 1 | 1 1 dv 

| | 进入 炼 5 | | | 直接 下 载 来 练习 || 用 模拟 器 看 看 效果 | | font-family: xujinglei; | 
, 四 王 ~ lBpx; 

| ! | 收藏 到 名 箱 慢 慢 学 | 去 PC 庙 好 好 练习 HE 用 | | 

1 说 明 ] 1 1 上 

| | Dl 

| | at ! 

! < ! | | | 返回 目录 | ! 


保存 二 维 码 , 在 PC 端 
进行 练习 (参照 说 明 ) 





观看 电脑 、 平 板 、 手 机 
端 不 同 的 显示 效果 


4. 其 他 PC 端 资 源 下 载 方式 


除了 前 面 介绍 过 的 可 以 直接 将 视频 、 在 线 练习 等 资源 推送 到 邮箱 之 外 ,还 提供 了 如 下 几 种 PC 端 
资源 获取 方式 。 

加 ”登录 清华 大 学 出 版 社 官方 网 站 (wwwi.tup.com.cn)， 在 对 应 图 书页 面 下 查找 资源 的 下 载 方式 。 

加 申请 加 入 QQ 群 、 微 信 群 ， 获 得 资源 的 下 载 方式 。 

回 扫描 图 书 封 底 “ 文 泉 云 盘 ” 二 维 码 ， 获 得 资源 的 下 载 方式 。 


册 何 使 用 杰 书 





小 日 实战 电子 书 


为 方便 读者 全 面 提升 ， 本 书 赠送 了 “前 端 开发 百 问 白 答 ”小 白 学 习 电 子 书 。 这 些 内 容 精 挑 细 选 ， 
希望 成 为 您 学 习 路 上 的 好 帮手 ， 关 键 时 刻 解 您 所 需 。 
扫 摘 图 书 封底 的 二 维 码 ， 可 在 手机 、 平 板 上 学 习 小 白手 册 内 容 。 





前 闯 开 发 百 问 百 答 





di 
二 区 人 人 人 和 
be Et 页 ?edims 网 基站 这 并 县 - 7 天 卫 再 亲 前 党 世 民 mw 岗 王 状 优 天王 月 县 





从 小 日 到 高 手 的 虹 变 


谷歌 的 创始 人 拉 里 。 佩 奇 说 过 ， 如 果 你 刻意 练习 某 件 事 超 过 10000 个 小 时 ， 那 么 你 就 可 以 达到 
世界 级 。 

因此 ， 不 管 您 现在 是 怎样 的 前 端 开 发 小 日 ， 只 要 您 按 着 下 面 的 步骤 来 学 习 ， 假 以 时 日 ， 您 会 成 
为 令 目 己 惊讶 的 技术 大 咖 。 

(1) 扎实 的 基础 知识 + 大 量 的 中 小 实例 训练 + 有 针对 性 地 做 一 些 综合 案例 。 

(2) 大 量 的 项 目 案例 观摩 、 学 习 、 操 练 ， 塑 造 一 定 的 项 目 思维 。 

(3) 善于 借用 他 山 之 石 ， 对 一 些 成 熟 的 开源 代码 、 设 计 素 材 拿 来 就 用 ， 学 会 站 在 巨人 的 屑 膀 上 。 

(4) 有 工夫 多 参阅 一 些 官方 权威 指南 ， 折 展 目 己 对 技术 的 理解 和 应 用 能 力 。 

(5) 最 为 重要 的 是 ， 多 与 同行 交流 ， 在 切磋 中 不 断 进 步 。 


书本 厚度 有 限 ， 学 习 空 间 无 限 。 纸 张 价 格 有 限 ， 知 识 价值 无 限 。 希 望 本 书 能 帮 您 真正 收获 学 习 
的 乐趣 和 知识 。 最 后 ， 视 您 阅读 快乐 ! 





“网 络 开发 视频 大 讲堂 ”系列 从 书 于 2013 年 5 月 出 版 ， 因 其 编写 细腻 、 讲 解 透彻 、 实 用 易学 、 
配备 全 程 视 频 等 ， 备 受 读 者 欢迎 。 从 书 累 计 销 售 近 20 万 册 ， 其 中 , 《HTMLS+CSS3 从 入 门 到 精通 》 
累计 销售 10 万 册 。 同 时 ， 系 列 书 被 上 百 所 高 校 选 为 教学 参考 用 书 。 

本 次 改版 ， 在 继承 前 版 优点 的 基础 上 ， 进 一 步 对 图 书 内 容 进行 了 优化 ， 选 择 面 试 、 就 业 最 
急需 的 内 容 ， 重 新 录制 了 视频 ， 同 时 增加 了 许多 当前 流行 的 前 端 技术 ， 提 供 了 “入 门 学 习 一 实 
例 应 用 一 项 目 开 发 一 能 力 测试 一 面试 ”等 各 个 阶段 的 海量 开发 资源 库 ， 实 战 容量 更 大 ， 以 帮助 
读者 快速 掌握 前 端 开发 所 需要 的 核心 精髓 内 容 。 

网 页 技术 层出不穷 日新月异， 但 是 不 管 采 用 什么 技术 ， 用 户 通 过 浏览 器 看 到 的 网 页 都 是 
由 HTML 和 CSS 构成 的 。 因 此 ，HTML 和 CSS 技术 是 网 页 制作 技术 的 基础 和 核心 。 本 书 将 重 
点 讲解 如 何 使 用 CSS 设计 网 页 样式 和 版 式 。 


CSS3 基础 CSS3 基础 知识 
CSS3 选择 器 
CSS3 文本 样式 
CSS3 图 像样 式 

CSS3 样式 CSS3 超 链 接 样式 

CSS3 列表 样式 
CSS3 表格 样式 
CSS3 表单 样式 


DIV+CSS 版 式 

CSS3 布局 HTML5+CSS3 设计 
CSS3 弹性 布局 
CSS3 动画 

CSS3 扩展 CSS3 响应 式 设 计 注意 、 提 示 、 说 明 
CSS3 脚本 化 

CSS3 实战 设计 团购 网 站 前 端 开发 资源 库 
设计 据 客 网 站 


本 书 内 容 


知识 











核心 技术 


SY 上 








项 目 实 战 
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本 书 特 后 


1. 由 浅 入 深 ， 编 排 合理 ， 实 用 易学 

本 书面 癌 零 基础 的 初学 者 ， 通 过 “一 个 知识 点 + 一 个 例子 + 一 个 结果 + 一 段 评 析 + 一 个 综合 应 
用 ”的 写作 模式 ， 全 面 、 细 致 地 讲述 了 CSS3+DIV 实 际 开发 中 所 需 的 各 类 知识 ， 由 浅 入 深 ， 循 序 
渐进 。 同 时 ， 本 书展 示 了 许多 Web 时 代 备 受 欢 迎 的 新 知识 ， 读 者 可 学 习 到 与 HTML5 相 关 的 一 些 
非常 实用 、 流 行 的 技术 。 

2. 跟着 案例 和 视频 学 ， 入 门 更 容易 

跟 看 例子 学 习 ， 通过 训练 提升 ， 是 初学 者 最 好 的 学 习 方式 。 本 书 和 案例 丰富 详尽 ， 多 达 334 个 ， 
且 都 附 有 详尽 的 代码 注释 及 清晰 的 视频 讲解 。 跟 着 这 些 案例 边 做 边 学 ， 可 以 避免 学 到 的 知识 流 
于 表面 、 限 于 理论 ， 尽 情感 受 编程 种 来 的 快乐 和 成 就 感 。 

3. 丰富 线 上 资源 ， 多 元 化 学 习 体 验 

为 了 传递 更 多 知识 ， 本 书 力 求 突 破 传统 纸 质 书 的 厚度 限制 。 本 书 提供 了 丰富 的 线 上 微 资源 ， 
通过 手机 扫 人 码 ， 读 者 可 随时 观看 讲解 视频 ， 在 线 练习 强化 提升 ， 全 程 便 捷 、 高 效 ， 感 受 不 一 样 
的 学 习 体 验 。 

4. 精彩 栏目 ， 易 错 点 、 重 点 、 难 点 贴心 提醒 

本 书 根据 初学 者 特点 ， 在 一 些 易 错 点 、 重 点 、 难 点 位 置 精心 设置 了 “注意 ”“ 提 示 ” 等 小 栏 
目 。 通 过 这 些小 栏目 ， 读 者 会 更 留心 相关 的 知识 点 和 概念 ， 绕 过 陷阱 ， 黎 握 很 多 应 用 技巧 。 


本 书 资 源 


229 节 高 清 微 视频 
334 个 实例 案例 分 析 
209 项 在 线 微 练习 


详尽 的 配 书 资源 220 项 源 代码 资源 快速 学 握 前 端 开发 精髓 


PSD 网 页 分 层 模 板 (426 套 ) 
设计 素材 大 全 (17 类 ，10000 个 ) 
网 页 配色 工具 箱 (600 个 ) 
网 页 模板 大 全 (632 套 ) 
前 端 素材 库 JavaScript 网 页 特效 大 全 〈24 套 ) 
Bootstrap 网 页 模板 (500 套 ) 拿 来 就 用 ， 提 升 速度 


Photoshop 设计 大 全 (18 类 ，2000 个 ) 
历史 经 典 网 页 欣赏 (508 例 ) 


网 页 设计 初级 示例 大 全 (49 例 ) 
网 页 应 用 分 类 人 案例 大 全 (1600 例 ) 
HTML5+CSS3+JavaSctipt 实用 案例 大 全 





PHP、MySQL 参考 手册 (5 册 ) 


权威 参考 手册 
yr 


应 








读者 对 象 


零 基 础 的 编程 目 学 者 。 
相关 培训 机 构 的 老师 和 学 生 。 
大 中 专 院 校 的 老师 和 学 生 。 
参加 毕业 设计 的 学 生 。 
初 、 中 级 程序 开发 人 员 。 


QA NAN 


读 有 前 须知 


作为 入 门 书籍 ， 本 书 知识 点 比较 庞杂 ， 所 以 不 可 能 面面俱到 。 技 术 学 习 的 关键 是 方法 ， 本 书 在 
很 多 实例 中 体现 了 方法 的 重要 性 ， 读 者 只 要 掌握 了 各 种 技术 的 运用 方法 ， 在 学 习 更 深入 的 知识 中 可 
大 大 提高 自学 的 效率 。 

本 书 提供 了 大 量 示例 ， 需 要 用 到 IE、Firefox、Chrome、Opera 等 主流 浏览 器 的 测试 和 预览 。 因 
此 ， 为 了 测试 示例 或 代码 ， 读 者 需要 安装 上 述 类 型 的 最 新 版 本 浏览 器 ， 各 种 浏览 器 在 CSS3 的 表现 上 
可 能 会 稍 有 差异 。 

限于 篇 幅 ， 本 书 示例 没有 提供 完整 的 HIML 代码 ， 读 者 应 该 补充 完整 的 HIML 结构 ,然后 进行 
测试 练习 ， 或 者 直接 参考 本 书 提供 的 下 载 源 代码 ， 边 学 边 练 。 

为 了 给 读者 提供 更 多 的 学 习 资源 ， 本 书 提供 了 很 多 参考 链接 ， 许 多 本 书 无 法 详细 介绍 的 问题 都 
可 以 通过 这 些 链 接 找到 答案 。 由 于 这 些 链接 地 址 会 因 时 间 而 有 所 变动 或 调整 ， 所 以 在 此 说 明 ， 这 些 
链接 地 址 仅 供 参考 ， 本 书 无 法 保证 所 有 的 这 些 地 址 是 长 期 有 效 的 。 


读者 服务 


学 习 本 书 时 ， 请 先 扫 描 封 展 的 权限 二 维 码 《〈 需 要 刊 开 涂 层 ) 获取 学 习 权 限 ， 然 后 即 可 免费 学 习 
书 中 的 所 有 线 上 线 下 资源 。 

本 书 所 附 赠 的 超 值 资源 库 内 容 ， 读 者 可 登录 清华 大 学 出 版 社 网 站 (www.tup.com.cn) ， 在 对 应 图 
书页 面 下 获取 其 下 载 方式 。 也 可 扫描 图 书 封 底 的 “ 文 果 云 盘 ” 二 维 码 ， 获 取 其 下 载 方式 。 

本 书 提供 QQ 群 (668118468、697651657) 、 微 信 公 众 号 〈qianduankaifa cn) 、 服 务 网 站 
(www.qianduankaifa.cn) 等 互动 渠道 ， 提 供 在 线 技术 交流 、 学 习 管 疑 、 技 术 资 讯 、 视 频 课 泽 、 在 线 勘 
误 等 功能 。 在 这 里 ， 您 可 以 结识 大 量 志同道合 的 朋友 ， 在 交流 和 切磋 中 不 断 成 长 。 

读者 对 本 书 有 什么 好 的 意见 和 建议 ， 也 可 以 通过 邮箱 〈qianduanjiaoshi@163.com) 发 邮件 给 
我 们 。 
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关于 作者 


前 端 科技 是 由 一 群 热爱 Web 开发 的 青年 骨干 教师 和 一 线 资深 开发 人 员 组 成 的 一 个 团队 ， 主 要 从 
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大 早 


CSS3 基础 


CSS3 是 CSS 规范 的 最 新 版 本 ， 在 CSS2 基础 上 增加 了 人 很 多 新 功能 ， 以 帮助 开发 人 员 解 
决 一 些 实际 问题 ， 如 圆 角 、 多 背景 、 透 明度 、 阴 影 等 功能 。 本 章 将 简单 介绍 CSS 的 基础 知 
识 ， 读 者 可 以 初步 了 解 CSS 的 基本 用 法 。 


【学 习 要 点 】 

DI 了 解 CSS 的 发 展 历史 。 
WI 正确 使 用 CSS。 

I 了 解 CSS 的 基本 特性 。 








Eee 网 页 样式 与 布局 从 入 门 到 精通 ( 微 课 精 编 版 ) 


1.1 CSS 发 展 历史 


CSS 是 Cascading Style Sheet 的 缩写 , 中 文 翻译 为 层 登 样式 表 。CSS 控制 HTML 标签 的 显示 样式 ， 
负责 设计 页 面 效 果 。 使 用 CSS 能 够 实现 页 面 的 内 容 与 表现 分 离 ， 提 高 工作 效率 。 

早期 的 HIML 标签 含有 大 量 的 显示 属性 ， 这 带 来 了 一 个 问题 : 网 页 结构 和 显示 样式 混在 一 起 ， 
使 网 页 代码 混乱 不 塔 ， 代 码 见 余 增加 了 带宽 负担 ， 代 码 维 护 也 变 得 昔 不 堪 言 。 

1994 年 ， 哈 坤 首次 提出 了 CSS 的 想法 ，1995 年 他 与 波斯 一 起 展示 这 个 建议 。 

1996 年 , W3C 正式 推出 CSS 语言 ,并 于 同年 12 月 发 布 CSS 1.0 版 本 (http://www.w3.org/TR/CSS1/)。 

1998 年 5 月 ，CSS 2.0 版 本 正式 发 布 (http://www.w3.org/TR/CSS2/)。 

2001 年 5 月 23 日 ， W3C 完成 CSS3 版 本 的 工作 草案 ,在 该 草案 中 制订 了 CSS3 发 展 路 线 图 ， 路 
线 图 详细 列 出 了 所 有 模块 ， 并 计划 在 未 来 逐步 进行 规范 。 

2002 年 ， 由 于 各 方 对 CSS3 标准 分 歧 太 大 ，W3C 开始 开发 CSS 2.1 版 本 。CSS 2.1 是 CSS 2.0 的 
修订 版 ， 它 纠正 了 CSS 2.0 版 本 中 的 一 些 错误 ， 并 且 更 精确 地 摘 述 了 CSS 的 浏览 器 实现 。 

2004 年 ，CSS 2.1 正式 发 布 ，2006 年 年 底 得 到 完善 。CSS 2.1 是 目前 最 流行 、 获 得 浏览 器 文 持 最 
完整 的 版 本 ， 它 更 准确 地 反映 了 CSS 当前 的 状态 。 

到 目前 为 止 ，CSS3 还 没有 推出 正式 的 完整 版 ， 但 是 已 经 陆续 推出 了 不 同 的 模块 ， 这 些 模块 已 经 
被 大 部 分 浏览 器 支持 或 部 分 实现 。 

CSS3 属性 支持 情况 如 图 1.1 所 示 (http://fmbip.conylitmus/)。 可 以 看 出 ， 完 全 支持 CSS3 属性 的 
浏览 器 为 Chrome 和 Safari。 









































平台 MAC WIN 
Ns © © O00@®@ © @ 0 从 
CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA SAFARI IE 
版 本 5 3.6 10.1 | 二 | 4 | 3.6 | 3 10 | os | + 6 | | 8 
RGBA v v sy/ v en | a | a | pa | | es | ee | ER 
HSLA MA V | DA viv oe | En | x x x 
Multiple Backgrounds a ~ | x | v 4 式 习 区 = xljvwvlwi xilx|x 
Border mge v w|x | v wiivlxixlvi v |x|x|x 
Border Radius op/ v x v vv viv x v v x x x 
Bo shadow ~ v i | ~ lvix|ilx|lv vv xix|x 
Opacity DA A | ~ ww Di iv w | x x x 
Gs Animations v x x | v v | xlxlxlxlv|ix|lx|lx 
Css Columns ya V X Y vv Ivlv x x Vv X | X | X 
css Gradients v v x v v lvilx|ilx|ix| | v |x| x|x 
Css Reflections V x |x vv v x x x x vv x x x 
Css Transforms sp ~ x vb/ wj vixlxlvlvwix|lx|lx 
css Transforms 3D v x |x |v v x x x x vv x x| x 
Css Transitions v x x v v |xix|ix lv v x|ix|x 
C55 FontFace 以 PA 、A Vv PA | v X = Vv vv VIv 
图 1.1 CSS3 属性 支持 列表 
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CSS3 选择 器 支持 情况 如 图 1.2 所 示 (http:/fmbip.conylitmus/)。 除 了 下 系列 版 本 和 Firefox 3， 
其 他 浏览 器 几乎 全 部 支持 ， 如 Chrome、Safari、Firefox 和 Opera。 


窑 提示 : 部 分 浏览 器 允许 使 用 私有 属性 支持 CSS3 的 新 特性 。 例如 ,Webkit 类 型 浏览 器 (如 Safari、 
Chrome ) 的 私有 属性 是 以 -webkit- 前 组 开始 ，Gecko 类 型 浏览 器 (如 Firefox ) 的 私有 属性 
是 以 -moz- 前 组 开始 , Konqueror 类 型 浏览 器 的 私有 属性 是 以 -khtml- 前 组 开始 ，Opera 浏览 
器 的 私有 属性 是 以 -o- 前 缓 开 始 ， 而 Internet Explorer 浏览 器 的 私有 属性 是 以 -ms- 前 级 开始 
( 目前 只 有 JIE8+ 支 持 -ms- 前 缓 ) 。 
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图 1.2 CSS3 选择 器 支持 列表 


1.2 使 用 CSS 


Css 代码 可 以 在 任何 文本 编辑 器 中 打开 和 编辑 ， 下 面 介绍 CSS 的 基本 语法 和 用 法 。 I 
1.2.1 CSS 样式 过 
样式 是 CSS 的 最 小 语法 单元 ， 每 个 样式 包含 两 部 分 内 容 ， 选 择 器 和 声明 ， 如 图 1.3 所 示 。 视频 





(sss+DN0 网 页 样式 与 布局 从 入 门 到 精通 ( 微 梨 精 编 版 ) 








选择 器 样式 分 隅 符 ”声明 声明 样式 分 隔 符 
| | 





HTML 标 签名 属性 属性 值 属性 属性 值 
图 1.3 CSS 样式 的 基本 结构 


四 ”选择 需 : 选择 占 告 诉 浏览 右 该 样式 将 作用 于 页 面 中 哪些 对 象 ， 这 些 对 象 可 以 是 一 个 或 多 个 
标签 ， 也 可 以 是 茶 个 具体 对 象 等 。 

四 声明 : 声明 命令 浏览 器 如 何 泻 染指 定 的 对 象 。 声 明 由 两 部 分 组 成 ， 即 属性 和 属性 值 ， 并 用 
分 号 标识 一 个 声明 的 结束 ， 样 式 中 最 后 一 个 声明 可 以 省 略 分 号 。 样 式 中 可 以 包含 一 个 或 多 
个 声明 ， 所 有 声明 被 放置 在 一 对 大 括号 内 ， 紧 邻 选择 占 后 面 。 
@ 属性 : 属性 是 CSS 预定 义 的 样式 选项 。 属 性 名 由 一 个 单词 或 多 个 单词 组 成 ， 多 个 单词 

之 间 通 过 连 字 符 相 连 。 这 样 能 够 很 直观 地 表示 属性 所 要 设置 的 样式 效果 。 

@ 属性 值 : 定义 属性 显示 效果 的 参数 ， 包 括 数值 和 单位 ， 或 者 关键 字 。 

【示例 1】 定 义 网 页 字体 大 小 为 12 像素 ， 字 体 颜 色 为 深 灰 色 ， 则 设置 如 下 样式 。 





body {font-size: 12px; color: #CCCCCC:;} 


多 个 样式 可 以 并 列 在 一 起 ， 不 需要 考虑 如 何 进 行 分 隔 。 
【示例 2】 定 义 段 落 文本 的 背景 色 为 紫色 ， 则 可 以 在 上 面 样式 基础 上 定义 如 下 样式 。 


body {font-size: 12px; color: #CCCCCC:;} 
p{background-color: #FFOOFF;} 


窑 提示 : 由 于 CSS 语言 忽略 空格 (除了 选择 器 内 部 的 空格 外 ) ， 因 此 可 以 利用 空格 来 格式 化 CSS 
源 代码 ， 则 上 面 代 码 可 以 进行 如 下 美化 。 


body { 
font-slze: 12px; 
color: #CCCCCC: 


} 
p { background-color: #FFOOFF; } 


这 样 在 阅读 CSS 源 代 码 时 就 一 目 了 然 了 ， 既 方便 陪读， 也 更 容易 维护 。 
1.2.2 应 用 CSS 样式 
应 用 CSS 样式 的 方法 包括 3 种 : 行内 样式 、 内 部 样式 和 外 部 样式 ， 下 面 分 别 进行 说 明 。 
1. 行内 样式 
行内 样式 就 是 把 CSS 样式 直接 放 在 代码 行内 的 标签 中 ， 一 般 都 是 放 入 标签 的 style 属性 中 ， 由 于 





。4 。 
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行内 样式 直接 插入 标签 中 ， 故 是 最 直接 的 一 种 方式 。 
【示例 1】 在 本 示例 中 ， 针 对 段落 、<h2> 标 签 、<em> 标 签 、<strong> 标 签 以 及 <div> 标 签 分 别 应 用 


了 CSS 行内 样式 ， 代 码 如 下 ， 页 面 演示 效果 如 图 1.4 所 示 。 


傅 
<p style="background-color:#999900"> 行 内 元 素 ， 控 制 段 落 -1</p> 
<h2 style="background-color:#FF6633"> 行 内 元 素 ，h2 标题 元 素 </h2> ' 
<p style="background-color:#999900"> 行 内 元 素 ， 控 制 段 落 -2</p> 
<strong style="font-size:30px:;"> 行 内 元 素 ，strong 比 em 效果 要 强 </strong> 
<div style="background-color:#66CC99: color:#993300:;height:30px; line-height: 30px:"> 行 内 元 素 ，div 块 级 元 

素 </div> 
<em style="font-size:2em:"> 行 内 元 素 ，em 强调 </em> 





http://localhost/mysite/test.himl Ar 


段落 相同 的 样式 ， 需 要 书写 
两 这， 既 增加 页 面体 积 ， 又 
为 后 期 的 修改 增加 工作 量 。 


行内 元 素 ，strong 比 em 效果 要 强 
公认 天 莫 ， em 好 克 





图 1.4 行内 样式 的 应 用 


2. 内 部 样式 


内 部 样式 是 将 CSS 代码 写 在 HTML 的 <style> 标 签 中 ， 其 特点 是 该 样式 只 能 在 此 页 有 效 。 
【示例 2】 在 本 示例 中 ， 通 过 内 部 样式 为 段落 设置 显示 样式 。 页 面 演示 效果 如 图 1.5 所 示 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<style type="text/css"> 

pi 
text-align: left: 诺 文本 左 对 齐 */ 
font-size: 14px: /# 字体 大 小 14 像素 */ 
line-height: 25px: /* 行 高 25 像素 */ 
text-indent: 2em: /* 首 行 缩 进 2 个 文字 大 小 空间 */ 
width: 500px: /* 段落 宽度 500 像素 */ 
margin: 0 auto: /# 浏览 器 居中 */ 
margin-bottom: 20px: /# 段落 下 边 距 20 像素 */ 








</style> 
</head> 
<body> 


<p>“ 百度” 这 一 公司 名 称 便 来 自 宋词 “ 众 里 寻 他 干 百度”。 百 度 公司 会 议 室 名 为 青玉 案 ， 即 是 这 首 词 
的 词牌 。 而 “能 掌 ” 图 标的 想法 来 源 于 “猎人 巡 迹 能 爪 ”的 刺激 ， 与 李 博 士 的 “分 析 搜 索 技 术 ” 非 常 相似 ， 
从 而 构成 百度 的 搜索 概念 ， 也 最 终 成 为 百度 的 图 标 形象 。 在 这 之 后 ， 由 于 在 搜索 引擎 中 ， 大 都 有 动物 形象 来 
示 志 ， 如 SOHU 的 狐 ， 如 GOOGLE 的 狗 ， 而 百度 也 便 顺理成章 称 作 了 熊 。 百 度 能 也 便 成 了 百度 公司 的 形象 


物 。</p> 


<p> 在 百度 那 次 更 换 LOGO 的 计划 中 ， 百 度 给 出 的 3 个 新 LOGO 设计 方案 在 网 民 的 投票 下 ， 全 部 被 否决 ， 


更 多 的 网 民 将 选票 投 给 了 原 有 的 能 掌 标志 。</p> 


<p> 此 次 更 换 LOGO 的 行动 共 进行 了 3 轮 投 票 ， 直 到 第 2 轮 投票 结束 ， 新 的 笑脸 LOGO 都 占据 了 绝对 优势 。 
但 到 最 后 一 轮 投票 时 ， 原 有 的 能 掌 标 志 却 戏剧 性 地 获得 了 最 多 的 网 民选 票 ， 从 而 把 3 个 新 LOGO 方案 彻底 否 


决 。</p> 
</body> 
</html> 


< 仙 注意 : <style> 标 签 不 仅 可 以 定义 CSS 样式 ， 还 可 以 定义 JavaScript 脚本 。 当 <style> 标 签 的 type 
属性 值 为 text/css 时 , 内 部 代码 为 CSS 样式 ; 当 <style> 标 签 的 type 属性 值 为 text/javascript 
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在 百度 那 次 更 换 LOGO 的 计划 中 ， 百 度 给 出 的 3 个 新 LOGO 
设计 方案 在 网 民 的 投票 下 ， 全 部 被 否决 ， 更 多 的 网 民 将 选票 投 
给 了 原 有 的 熊 掌 标志 。 








此 次 更 换 LOGO 的 行动 共 进行 了 3 轮 投票 ， 直 到 第 2 轮 投 票 结 
东 ， 新 的 笑 验 LOGO 部 占据 了 绝对 优势 . 但 到 最 后 一 轮 投 票 时 ， 
原 有 的 熊 党 标志 却 戏剧 性 地 获得 了 最 多 的 网 民选 票 ， 从 而 把 3 个 
新 LOGO 方 案 彻底 否决 。 


图 1.5 内 部 样式 的 应 用 


时 » 内 部 代码 为 JavaScript 脚本 。 


3. 外 部 样式 


外 部 样式 通过 HIML 的 <link> 标 签 ， 将 外 部 样式 表 文 件 链接 到 HTML 文档 中 ， 这 是 最 实用 的 方 
式 。 这 种 方法 将 HTML 文档 和 CSS 文件 完全 分 离 ， 实 现 结 构 层 和 表示 层 的 彻底 分 离 ， 增 强 网 页 结构 


的 扩展 性 和 CSS 样式 的 可 维护 性 。 


和 网 页 样式 与 市 局 从 入 门 到 精通 ( 微 课 精 编 版 ) 
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【示例 3】 在 本 示例 中 ， 使 用 链接 式 为 HTML 代码 应 用 样式 ， 书 写 、 更 改 方便 。 页 面 演示 效果 
如 图 1.6 所 示 。 





<!doctype html> | 
<html> 
<head> 

<meta charset="utf-8"> 


<link hre 舍 "lianjle.css" type="text/css" rel="stylesheet" /> 

<link hre 舍 "lianjle-2.css" type="text/css" rel="stylesheet" /> 

</head> 

<body> 

<p> 我 是 被 lianjie-2.css 文件 控制 的 ， 楼 下 的 你 呢 ? ? </p> 

<h3> 楼 上 的 ,<span>lianjie.css</span> 文 件 给 我 穿 的 花 衣 服 。</h3> 
</body> 

</html> 


<link href="lianjie.css" type="text/css"rel= 
"stylesheet">， 其 中 href 代 表 链 接 CSS 文 件 
的 地 址 ，type 链 接 文档 的 类 型 ，rel 定 义 链 
接 外 部 文件 的 关联 类 型 。 





图 1.6 外 部 样式 的 应 用 


在 上 面 的 示例 中 ， 通 过 link 链接 两 个 外 部 CSS 文件 ， 其 中 将 公共 样式 放 入 一 个 CSS 文件 ， 当 前 
页 面 样式 放 入 另 一 个 CSS 文件 。 
加 ”lianjie.css 文件 代码 如 下 。 


h3{ 
font-weight:normal: /# 取消 标题 默认 加 粗 效果 */ 
background-color:#66CC99: /#* 设置 背景 色 */ 
height:S0px: /# 设置 标签 的 高 度 */ 
line-height:50px: /# 设置 标签 的 行 高 */ 
} 
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spant{ 
color:#FF0000: /#* 设置 字体 颜色 */ 
font-weight:bold: /# 字体 加 粗 */ 
} 


四 lianjie-2.css 文件 代码 如 下 。 


pi 
color:#FF3333: /* 设置 字体 颜色 */ 
font-weight:bold: /# 字体 加 粗 */ 
border-bottom:3px dashed #009933; /# 设置 下 边框 线 */ 
line-height:30px: /# 设 置 行 高 */ 
} 


CSS 文件 可 以 使 网 站 所 有 页 面 样式 统一 ， 便 于 管理 ， 减 少 代码 和 维护 时 间 。 当 修改 CSS 文件 时 ， 
所 有 应 用 此 CSS 文件 的 页 面 样式 都 将 更 新 。 


1.2.3 CSS 样式 表 


一 个 或 多 个 CSS 样式 可 以 组 成 一 个 样式 表 。 样 式 表 包括 内 部 样式 表 和 外 部 样式 表 ， 它 们 没有 本 
质 区 别 ， 都 是 由 一 个 或 者 多 个 样式 组 成 。 
1. 内 部 样式 表 
内 部 样式 表 包 含 在 <style> 标 签 内 ， 一 个 <style> 标 签 就 表示 一 个 内 部 样式 表 。 而 通过 标签 的 style 
属性 定义 的 样式 属性 就 不 是 样式 表 。 如 果 一 个 网 页 文档 中 包含 多 个 <style> 标 签 ， 就 表示 该 文档 包含 
多 个 内 部 样式 表 。 
2. 外 部 样式 表 


| 如 果 CSS 样式 被 放置 在 网 页 文档 外 部 的 文件 中 ， 则 称 为 外 部 样式 表 ， 一 个 CSS 样式 表 文档 就 表 
” 示 一 个 外 部 样式 表 。 实际 上 ， 外 部 样式 表 也 就 是 文本 文件 ， 扩 展 名 为 .css。 当 把 CSS 样式 代码 复制 到 
” 一 个 文本 文件 中 后 ， 另 存 为 .css 文件 ， 则 它 就 是 一 个 外 部 样式 表 。 如 图 1.7 所 示 就 是 禅 意 花园 的 外 部 
: 样式 表 (http://www.csszengarden.com/)。 

可 以 在 外 部 样式 表 文件 项 部 定义 CSS 源 代码 的 字符 编码 。 

【示例 】 下 面 的 代码 定义 样式 表 文件 的 字符 编码 为 中 文 简体 。 


@charset "gb2312"; 


/ 如 果 不 设置 CSS 文件 的 字符 编码 ， 可 以 保留 默认 设置 ， 则 浏览 器 会 根据 HTML 文件 的 字符 编码 
”来 解析 CSS 代码 。 
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Xx 
文件 (F) ”篇 铝 (E) 格式 [0O) ”查看 (V) ”帮助 (H) 
上 css Zen Garden default style v1.02 */ ~ 
/* css released under Creative Commons License -~ http://creativecommons, org/licenses/by-nc-sa/l,.0/ 本/ 


/* This file based on “Tranquille” by Dave Shea */ 
/+ Tou may use this file as a fomdation for any new work, but you may find it easier to start from scratch. 


/# Not all elements are defined in this file, so you 11 most likely want to refer to the xhtml as well. +*/ 


Tour images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */ 


/让 oe elements */ 


line-hei 
color: #555753:; 
backsround: #fff urllhttp://csszenearden. com/001/blossoms. jpg) no-repeat bottom right: 


margin: 0, 
en: 0, 


margin-top: 0: 
om i justify; 





1.7 禅 意 花园 外 部 样式 表 文 件 


1.2.4 导入 外 部 样式 表 


外 部 样式 表 必 须 导 入 网 页 文档 中 ， 才 能 够 被 浏览 器 识别 和 解析 。 外 部 样式 表 文 件 可 以 通过 以 下 
两 种 方法 导入 HTML 文档 中 。 

1. 使 用 <link> 标 签 导 入 

使 用 <link> 标 签 导入 外 部 样式 表 文 件 ， 代 码 如 下 。 


<link href—="001.css" rel="stylesheet" type="text/css" /> 


其 中 href 属性 设置 外 部 样式 表 文 件 的 地 址 ， 可 以 是 相对 地 址 ， 也 可 以 是 绝对 地 址 。rel 属性 定义 
该 标签 关联 的 是 样式 表 标 签 。type 属性 定义 文档 的 类 型 ， 即 为 CSS 文本 文件 。 

一 般 在 定义 <link> 标 签 时 ， 应 定义 3 个 基本 属性 ， 其 中 href 是 必须 设置 属性 。 有 具体 说 明 如 下 。 

四 “href: 定义 样式 表 文 件 URL。 

名 type: 定义 导入 文件 类 型 ， 同 style 元 素 一 样 。 

四 rel: 用 于 定义 文档 关联 ， 这 里 表示 关联 样式 表 。 

也 可 以 在 link 元 素 中 添加 title 属性 ， 设 置 可 选 样式 表 的 标题 ， 即 当 一 个 网 页 文档 导入 了 多 个 样 
式 表 后 ， 可 以 通过 title 属性 值 选 择 所 要 应 用 的 样式 表 文 件 。 

另外 ，title 属性 与 rel 属性 存在 联系 ， 按 W3C 组 织 的 计划 ， 未 来 的 网 页 文档 会 使 用 多 个 link 元 素 
导入 不 同 的 外 部 文件 ， 如 样式 表 文 件 、 脚 本 文件 、 主 题 文 件 ， 甚 至 可 以 包括 个 人 自 定义 的 其 他 补充 文 
件 。 导 入 这 么 多 不 同类 型 、 名 称 各 异 的 文件 后 ， 可 以 使 用 title 属性 进行 选择 ， 这 时 rel 属性 的 作用 就 显 
现 出 来 了 ， 它 可 以 指定 网 页 文件 初始 显示 时 应 用 的 导入 文件 类 型 ， 目 前 只 能 关联 CSS 样式 表 类 型 。 

外 部 样式 是 CSS 应 用 最 佳 方案 ， 一 个 样式 表 文 件 可 以 被 多 个 网 页 文件 引用 ， 同 时 一 个 网 页 文件 
可 以 导入 多 个 样式 表 ， 方 法 是 重复 使 用 link 元 素 导 入 不 同 的 样式 表 文 件 。 

2. 使 用 (@import 关键 字 叶 入 

在 <style> 标 签 内 使 用 @import 关键 字 导 入 外 部 样式 表 文 件 ， 代 码 如 下 。 


<style type="text/css"> 
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(QImport url("001.css"); 
</style> 


| 在 @import 关键 字 后 面 ， 利 用 url0 函 数 包含 具体 的 外 部 样式 表 文 件 的 地 址 。 





(42 浊 己 提示 : 两 种 导入 样式 表 的 方法 比较 如 下 。 
| @ link 属于 HTML 标签， 而 @import 是 CSS 提供 的 。 
@ ”加载 页 面 时 ，link 会 同时 被 加 载 ， 而 (@import 引用 的 CSS 会 等 到 页 面 加 载 完 再 加 载 。 
@ @import 只 在 IE5 以 上 才能 识别 ,而 link 是 HTML 标签 ， 无 兼容 问题 。 
@ link 方式 的 样式 的 权重 高 于 @import 的 权重 。 
因此 ， 一 般 推荐 link 导入 样式 表 的 方法 ，(@import 可 以 作为 补充 方法 使 用 。 


1.2.5 CSS 注释 


在 CSS 中 增加 注释 很 简单 ， 所 有 被 放 在 “/*” 和 “*/” 分 隔 符 之 间 的 文本 信息 都 被 称 为 注释 。 
【示例 1】 整 段 代 码 单行 注释 。 

上 # 下 面 这 段 代 码 的 作用 是 建立 网 页 布局 start */ 
.head{width:960px:} 

上 # 下 面 这 段 代 码 的 作用 是 建立 网 页 布局 end */ 
【示例 2】 整 段 代 码 多 行 注释 。 

上 # 下 面 这 段 代 码 的 作用 是 建立 网 页 布局 

它 包 括 头 部 和 尾部 宽度 设置 start */ 

.head {width:960px:} 

.footer {width:960px:} 

上/# 下 面 这 段 代码 的 作用 是 建立 网 页 布局 

它 包 括 头 部 和 尾部 宽度 设置 end */ 


【示例 3】 单 行 代码 注释 。 





pi 
color: #ff7000: /# 字体 颜色 设置 */ 
height: 30px: /# 段落 高 度 设置 */ 

} 

上 面 给 出 了 整 段 代码 单行 注释 、 整 段 代 码 多 行 注 释 以 及 单行 代码 注释 ， 它 们 的 共同 点 同时 也 是 
CSS 代码 注释 的 要 求 : 注释 语句 以 “/x*” 开 始 ， 以 “*/” 结 束 ， 中 间 加 入 注释 内 容 。 下 面 的 例子 是 进 
行 CSS 代码 应 用 并 查看 浏览 器 下 的 效果 。 

【示例 4】 在 本 示例 中 ， 将 段落 和 标题 分 别 添 加 CSS 注释 。 页 面 演示 效果 如 图 1.8 所 示 。 


<style type="text/css"> 
/# 关于 段落 的 注释 ”开始 */ 
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.STYLE1 { 
color: #009900: /*# 字体 颜色 是 绿色 的 */ 
} 
.STYLE2 { 
font-size: 18px: /# 字体 大 小 为 18 像素 */ 
color: #FF3300: /# 字体 颜色 是 红色 的 */ 
font-weight: bold: 谍 字体 进行 了 加 粗 */ 
} 


上 # 关于 段落 的 注释 ”结束 */ 
上 # 标签 设置 注释 ”开始 */ 


STYLE3 { 
color: #0000FF: /*# 字体 颜色 为 蓝 色 */ 
font-family: "黑体 "; /# 字体 为 黑体 */ 
font-style: italic: /# 字体 效果 为 倾斜 */ 

} 

/# 标签 设置 注释 ”结束 #/ 

</style> 


<p class="STYLE1"> 段 落 设 置 一 </p> 
<p class="STYLE2"> 段 落 设 置 二 </p> 
<h2 class="STYLE3"> 标 题 设置 效果 </h2> 


XxX 
Oe eens -a0 


只 营 设置 一 


段落 设置 二 注释 文字 完全 看 不 见 ， 只 有 通 


这 查看 源 六 人 才能 看， 的 CS8 
— gp, 注释 便于 开发 人 员 理解 代码 ， 
存 邦 届 音 残 侨 同时 不 影响 页 面 效 果 。 





图 1.8 ”CSSs 代码 添加 注释 


1.3 CSS 特性 


层 登 和 继承 是 CSS 样式 两 个 最 基本 的 特性 ， 下 面 分 别 进行 说 明 。 


1.3.1 CSS 后 登 性 
所 谓 层 登 性 ， 就 是 CSS 样式 允许 重复 声明 ， 可 以 相互 覆盖 。 对 于 相同 CSS 样式 来 说 ， 不 同位 置 
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的 样式 其 优先 级 是 不 同 的 ， 主 要 体现 在 以 下 几 个 方面 。 
一 般 来 说 ， 行 内 样式 优先 于 内 部 样式 或 者 外 部 样式 。 


四 
四 


四 


附加 了 !important 关键 字 的 声明 会 拥有 最 高 的 优先 级 。 注 意 ， 必 须 把 limportant 命令 放置 在 


声明 语句 与 分 号 之 间 ， 人 否则 无 效 。 

对 于 相同 权重 的 内 部 样式 或 外 部 样式 ， 
基本 选择 器 部 拥有 一 个 优先 级 加 权 值 ， 
标签 选择 占 : 优先 级 加 权 值 为 1。 


类 选择 器 : 优先 级 加 权 值 为 10。 

属性 选择 器 : 优先 级 加 权 值 为 10。 
ID 选择 器 : 优先 级 加 权 值 为 100。 
@ 其 他 选择 右 : 优先 级 加 权 值 为 0， 


组 合 选择 右 的 优先 级 加 权 值 是 组 合 的 基本 选择 名 的 加 权 值 之 和 。 以 此 类 推 ， 最 后 根据 加 权 


越 接 近 对 象 的 样式 ， 优 先 级 越 高 。 


说 明 如 下 。 


伪 元 素 或 伪 对 象 选 择 器 : 优先 级 加 权 值 为 1。 


如 通 配 选 择 锅 等 。 


值 之 和 来 决定 哪个 样式 的 优先 级 大 。 计 算 的 规则 如 下 。 
@ 统计 选择 孝 中 ID 选择 器 的 个 数 ， 然 后 乘 以 100。 
@ 统计 选择 器 中 类 选择 吉 的 个 数 ， 然 后 乘 以 10。 

@ 统计 选择 器 中 的 标签 选择 需 的 个 数 ， 然 后 乘 以 1。 
【示例 1】 本 示例 演示 了 如 何 计算 不 同样 式 的 加 权 值 。 


h3 {color:#ff7300;} 
.f14{font-size:14px;} 

#head {width:960px:} 

h3 .fl4{font-weight:bold;} 

#head h2 {border: 1px solid #ff73;} 
div p{padding:0 10px:} 

div #head {margin:0 auto:} 

#head h2 span{float:right:} 

#head .fl4 em{float:right:} 

#head .fl14 span em{float:rnight:} 
#head div h2 .f12 span em{color:#000;} 


【示例 2】 在 本 示例 中 ， 通 过 内 部 样式 为 同一 个 元 素 使 用 不 同 的 复合 选择 占 ， 从 而 为 其 设置 样式 
属性 ， 通 过 层 登 规则 进行 比较 得 出 最 终 样式 属性 值 。 页 面 效果 如 图 1.9 所 示 。 


<style type="text/css"> 


div{ 


margin:0 auto: 
text-align:center; 
} 


人/ 加 权 值 =1 分 */ 
雍 加 权 值 =10 分 */ 
此 加 权 值 =100 分 */ 


/# 加 权 值 =1 分 +10 分 =11 分 */ 

/* 加 权 值 =100 分 +1 分 =101 分 */ 

上 # 加 权 值 =1 分 +1 分 =2 分 */ 

/# 加 权 值 =1 分 +100 分 =101 分 */ 

/* 加 权 值 =100 分 +1 分 +1 分 =102 分 */ 

/# 加 权 值 =100 分 +10 分 +1 分 =111 分 */ 

/# 加 权 值 =100 分 +10 分 +1 分 +1 分 =112 分 */ 

/# 加 权 值 =100 分 +1 分 +1 分 +10 分 +1 分 +1 分 =114 分 */ 


/# 标准 浏览 器 下 居中 */ 
/#* IE 怪异 模式 下 居中 */ 
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.Cent{ 
width:400px:; 
border: 1px dashed #CC0099:; 
padding: 10px 15px; 

} 

#1mp {border: 1px dashed #3366FF:} 

.Cent{font-size:14px:} 

.Cent p{ 
font-size:16px;: 
font-weight:bold:; 

} 

.Cent .duanluo 
font-weight:normal; 
line-height:1.Sem:; 
text-align:left 
} 

.Cent .duanluo span{fcolor:#009966:} 

#imp Span{ 
color:#669933:; 
font-weight:bold: 
font-size:22px 
} 

span{font-size:30px !Important: 

span{font-size:40px;!important 


} 
</style> 


<div class="Cent" 1d="imp"> 


<p class="duanluo" id="DL"><span>CSS</span> (Cascading Style Sheet， 可 译 为 “ 层 车 样式 表 ” 或 “级 联 样 
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上 # 设置 宽度 ， 否 则 居中 看 不 见效 果 */ 
上 # 类 别 选择 器 设置 边框 线 */ 会 沧 
上 # 设置 间距 */ | 





上 #JID 选择 器 设置 边框 线 */ 
/# 类 别 选择 器 设置 字体 大 小 */ 


/* 类 别 选择 器 和 标记 选择 器 一 起 设置 字体 大 小 */ 
/* 字体 加 粗 */ 


/2 次 类 别 选 择 器 设置 取消 加 粗 效果 */ 

/* 段落 行 高 */ 

/* 文本 左 对 齐 */ 

/* 复合 选择 器 设置 字体 颜色 */ 

/* ID 选择 器 和 标签 选择 器 进行 定义 */ 

/#* 字体 加 粗 */ 

/# 字体 22 像素 ， 要 比较 的 地 方 */ 

/# <span> 标 签 使 用 优先 级 最 高 的 !important 命令 */ 


/# 错误 手写 !important 命令 的 位 置 */ 


式 表 ”) 是 一 组 格式 设置 规则 ， 用 于 控制 Web 页 面 的 外 观 。 通 过 使 用 CSS 样式 设置 页 面 的 格式 ， 可 将 页 面 的 内 
容 与 表现 形式 分 离 。 页 面 内 容 存 放 在 HTML 文档 中 ， 而 用 于 定义 表现 形式 的 CSS 规则 则 存放 在 另 一 个 文件 中 或 
HTML 文档 的 某 一 部 分 ， 通 常 为 文件 头 部 分 。 将 内 容 与 表现 形式 分 离 ， 不 仅 可 使 维护 站 点 的 外 观 更 加 容易 ， 而 
且 还 可 以 使 HTML 文档 代码 更 加 简练 ， 缩 短 浏览 器 的 加 载 时 间 。 

</p> 

</div> 
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“le SS http://localhost/mysite/ PD > 0 | E localhost 





CSS (cascading Style Sheet， 可 译 为 “ 层 秋 样式 表 * 或 


: “级 联 样式 表 ") 是 一 组 格式 设置 规则 ， 用 于 控制 Web 页 面 
; 的 外 观 。 通 过 使 用 Css 样式 设置 页 面 的 格式 ， 可 将 页 面 的 
:内容 与 表现 形式 分 高 。 页 面 内 容 存放 在 HTML 文 档 中 , 而 
: 用 于 定义 表现 形式 的 Css 规 则 则 存放 在 另 一 个 文件 中 或 。 
: HTMI 文 档 的 某 一 部 分 ， 通 常 为 文件 头 部 分 。 将 内 容 与 表 
现形 式 分 离 ， 不 仅 可 使 维护 站 点 的 外 观 更 加 容易 ， 而 且 还 
: 可 以 使 HTML 文 档 代码 更 加 简练 ， 缩 短 浏览 器 的 加 载 时 

: 间 。 





图 1.9 层 和 倒 特 性 测试 


在 上 面 的 示例 中 ， 香 看 浏览 器 效果 并 逐步 分 析 代 码 ， 需 要 注意 的 是 ， 下 面 每 一 步 测 试 时 ， 后 面 
的 代码 需要 删除 ， 故 浏览 器 有 多 次 显示 结果 ， 每 一 步 都 需要 进行 浏览 器 显示 ， 以 但 看 结果 。 

第 1 步 ， 首 先 实现 浏览 器 居中， 针对 <div> 标 签 设置 火狐 浏览 器 下 居中 属性 margin:0 auto; 正 浏 
览 器 下 居中 属性 text-align:center。 


div{margin:0 auto; text-align:center;} 


第 2 步 ，Cent 层 设置 宽度 为 400 像素 ， 如 果 没 有 宽度 设置 ， 则 浏览 器 上 的 大 中 也 将 无 效 。 接 看 
设置 4 个 方 同 的 内 间距 ， 最 后 设置 1 像素 颜色 为 粉红 色 虚 线 边 框 线 。 


.Cent{width:400px; border: 1px dashed #CC0099; padding:10px 15px;} 


第 3 步 ， 通 过 ID 值 引 用 Cent 层 ， 定 义 1 像素 颜色 为 粉 蓝 色 虚线 边框 线 ， 根 据 前 和 面 介绍 的 层 谷 规 
则 : 类 选择 器 10 分 、ID 选择 器 100 分 ， 最 终 边框 线 颜 色 为 蓝 色 。 如 果 将 类 别 选择 器 Cent 层 和 ID 选择 
器 可 mp 定义 的 顺序 颠倒 过 来 ， 最 终结 果 依 然 是 蓝 色 ， 其 原因 在 于 ID 选择 器 的 优先 级 别 高 于 类 选择 器 。 


.Cent{width:400px; border:1px dashed #CC0099; padding: 10px 15px;} 
#1imp {border: 1px dashed #3366FF:;} 


: 第 4 步 ， Cent{} 定 义 字 体 大 小 为 14 像素 ， 而 .Cent pf} 定 义 字 体 大 小 为 16 像素 。 根据 前 面 介绍 的 
| 层 登 规则 : 类 选择 器 10 分 、 标 签 选 择 器 1 分 ， 那么 .Cent{} 为 10 分 、.Cent p 和 =10 分 +1 分 =11 分 ， 故 
， 最 终结 果 为 段落 字体 大 小 为 16 像素 且 字 体 加 粗 显示 。 


.Cent{font-size:14px;} 
.Cent p {font-size:16px; font-welght:bold:} 


第 $ 步 ，Cent 层 中 段落 添加 class 名 duanluo, 定义 字体 不 再 加 粗 显示 , 行 高 1.5em, 文本 左 对 齐 。 
对 于 上 一 步 的 加 粗 设置 ， 如 果 字 体 大 小 无 效 ， 则 查看 加 粗 结果 。 行 高 设置 使 用 相对 单位 可 避免 字体 
”大 小 的 改变 而 影响 原先 段落 文字 之 间 的 距离 。 在 使 用 浏览 器 居中 时 ， 正 浏览 器 居中 需要 设置 
: text-align:center;， 这 里 更 改 Cent 层 内 文本 对 齐 方式 为 左 对齐 ， 而 Cent 层 依然 大 中 显示 。 
: 段落 内 的 <span> 标 签 设置 字体 颜色 为 #009966， 而 通过 ID 值 设 置 字体 颜色 为 #669933。 根 据 前 面 
介绍 的 层 琶 规则 : 类 选择 器 10 分 、 标 签 选择 器 1 分 、ID 选择 器 100 分 ， 故 .Cent .duanluo span 得 分 
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为 10 分 +10 分 +1 分 =21 分 ， 而 执 mp span 得 分 为 100 分 +1 分 =101 分 ， 最 终 字 体 颜色 为 #669933。 


.Cent .duanluo {font-weight:normal; lne-helght:1.Semi text-align:left} 
.Cent .duanluo span{color:#009966;} 
#1imp span{color:#669933; font-weight:bold; font-size:22px} 


第 6 步 ， 在 设置 段落 字体 大 小 时 ， 最 终 .Centp 设置 的 字体 大 小 为 浏览 器 显示 结果 : 16 像素 ， 而 
通过 ID 选择 器 定义 字体 大 小 后 ， 字 体 大 小 变 为 22 像素 。 这 里 通过 !important 命令 将 <span> 字 体 大 小 
设置 为 30 像素 ， 因 !important 命令 权限 无 限 大 ， 即 分 数值 较 高 ， 暂 定 值 为 1000 分 ， 故 ##mp span 分 数 
为 101 分 ， 小 于 !important 命令 值 1000 分 ， 最 终结 果 为 30 像素 。 

蔡 span{font-size:30px limportant;} 和 #imp span {font-size:50px limportant;} 比 较 ， 根 据 前 和 面 介 绍 的 
层 钱 规则 : ID 选择 器 100 分 、 标 签 选 择 器 1 分 、!important 命令 值 1000 分 ， 故 span 们 得 分 为 1000 
分 (内 部 属性 中 !important) +1 分 〈 标 和 俭 选 择 右 ) =1001 分 ， 而 共 mp span {font-size:50px !important:} 
得 分 为 1000 分 (内 部 属性 中 !important) +100 分 (ID 选择 器 ) +1 分 〈 标 签 选 择 器 ) =1101 分 。 


1.3.2 CSS 继承 性 


所 谓 继承 性 ， 就 是 指 被 包含 的 元 系 将 拥有 外 层 元 素 的 样式 效果 。 继 承 性 最 典型 的 应 用 就 是 定义 
网 页 标签 的 默认 样式 。 
【示例 】 在 本 示例 中 ， 设 计 HTML 结构 而 不 书写 CSS 样式 ， 查 看 页 面 效果 如 图 1.10 所 示 。 


<div class="head" 1d="AT"> 
<h3><a hre 伍 "#">More>></a><span> 新 闻 动 态 </span></h3> 
<div class="list"> 
<ul 1d="S2"> 
<]i><a hre 伍 "#"> 微 信 “ 阅 读数 ”是 怎么 算 的 ? <span>[07-27]</span></a></li> 
<]i><a hre 住 "#"> 重 振 人 工 智 能 雄心 壮志 的 时 刻 已 经 到 了 <span>[07-25] </span> </a></li> 
<]li><a hre 仁 "#">Google 再 次 “ 登 月 ”Baseline 工程 把 基因 大 数据 化 <span> [07-26]</span> 
</a></li> 
</ul> 
</div> <!--list end--> 
</div> <!--left2-] end--> 


< Sl SS http://localhost/m PD BC localhost 


More>> 新 闻 动 态 


。 微 信 " 疗 读数 " 星 怎么 算 的 ? [07.27] 
。 重 枝 人 人 条 9 台 b4 全 ， 上 的 gd 守 上 | 口 妈 硬 | 了 


标 人 奴 必 , 半 Ed mts [ [07-25 
。 Google 避 次 " 登 月 " Baseline 工 程 把 基因 大 郝 据 化 [07-26] 








图 1.10 ”HTML 代码 页 面 效果 图 
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在 上 面 的 示例 中 ， 通 过 继承 的 角度 考虑 标记 直接 的 树 形 关 系 ， 图 1.11 给 出 继承 关系 树 形 图 ， 对 
比 图 1.10，<html> 标 签 是 根 元 素 ， 它 是 所 有 HTML 元素 的 源头 。 在 每 一 个 分 支 中 ， 下 层 是 上 层 的 子 
元 素 、 上 层 是 下 层 的 父 元 素 ， 故 定义 CSS 样式 时 ， 编 写 样 式 html, body{font-size:30px}， 则 页 面 所 有 
元 素 都 将 继承 根 元 素 、 父 元 素 的 字体 大 小 设置 ， 而 编写 的 基本 标记 选择 器 、 类 别 选择 器 、ID 选择 器 
以 及 复合 选择 器 都 是 根据 HIML 结构 进行 编写 ， 尤 其 是 复合 选择 器 中 前 后 标记 的 位 置 就 是 实际 
”HTML 结构 ， 即 图 1.11 所 示 的 树 形 图 。 





UL 
UL 
U U 
CC 
二 
LU 


图 1.11 继承 关系 树 形 图 
14 案例 实战 


“本 节 将 学 习 设计 一 个 完整 的 页 面 , 体验 标准 网 页 的 制作 过 程 。 案例 页 面 设计 效果 如 图 1.12 所 示 。 





Hello World 第 一 个 CSS3+DTV 页 面 





以 下 代码 是 我 纳 第 一 个 Css3+01t 丙 面 ， 读 两 面 虹 名 居中 归 东 字符 轴 ello dts 





图 1.12 使 用 CSS 设计 的 第 一 个 页 面 


【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建 HIML 文档 ， 保 存 为 index.html。 
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会 提示 : 本 页 面 所 需要 的 图 片 等 素材 可 以 参考 附 赠 的 源 代码 。 考 虑 到 很 多 初学 者 是 第 一 次 接触 
CSS， 本 案例 稍 显 复杂 ， 因 此 建议 读者 可 根据 实际 情况 有 选择 性 学 习 ， 或 直接 跳 过 本 节 
操作 练习 。 

第 2 步 ， 切 换 到 代码 视图 ， 在 <body> 标 签 内 输入 下 面 代码 ， 构 建 本 页 面 主体 结构 ， 设 计 本 例 页 

面 一 级 框架 。 





<!--[ 一 级 框架 ]--> 
i 
<div 1d="top"></div> 
<div 1d="top1"></div> 
一直 体 二 > 
<div 1d="main"></div> 
<!-- 底 部 --> 
<div 1d="footer"></div> 
<div 1d="copyright"></div> 
在 标准 布局 中 ， 读 者 应 该 为 每 个 div 框架 元 素 定 义 id 属性 ， 这 些 id 属性 如 同人 的 吴 份 证 一 样 ， 
方便 CSS 准确 地 控制 每 个 div 布局 块 。 所以， 为 了 阅读 和 维护 的 需要 ， 我 们 应 该 为 它们 起 一 个 有 意 
义 的 名 字 。 
第 3 步 ， 进 一 步 细 化 页 面 结 构 ， 设 计 页 面 内 部 层次 框架 。 由 于 本 例 页 面 比较 简单 ， 栎 套 框架 不 
会 很 深 ， 顶 部 和 底部 布局 块 可 能 不 需要 骨 套 框架 。 输 入 以 下 完整 的 HTML 结构 代码 。 


<!--[ 完 整 HTML 框架 ]--> 
<1 一 顶部 一 > 
<div 1d="top"></div> 
<div 1d='"top1"><Img src="1mages/bg top.jpg" width="776" height="121" /></div> 
SR 
<div 1d="main"> 
<div 1d="content"> 

<div id="title">Hello World -- 第 一 个 CSS3+DIV 页 面 </div> 

<div class="sub"> 实 例 </div> 

<div class="box"><div class="t]"><div class="tr"><div class="bl"><div class="content br"> 


第 4 步 ， 丰 富 结构 内 容 。 使 用 <pre> 标 签 显示 代码 内 容 ， 使 用 <a> 设 计 超 链接 文本 ， 整 个 页 面 内 
容 显 示 如 下 ， 代 码 内 容 是 在 网 页 中 居中 显示 红色 字符 “Hello World!”。 


<pre> 
&lt;!doctype htmlwgt: 
&lthtml&gt: 
&ltheadwcgt: 
&lt:meta charset=&quot:utf-8&quot: &et: : 
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&lt:title&egt:;Hello World&lt:/title&egt: 
&lt:style type=&quot;text/css&quot;&et; 
hl { 
color: #FF0000: 
text-align: center:; 
} 
&lt:/style&et: 
&lt:/head&et; 
&lt:body&et: 
&lt:hl&egt:Hello World! &lt:/hl &et: 
&lt:/body&et; 
&lt:/html&et: 
</pre> 
</div></div></div></div></div> 
<div id="gotop"><a title=" 跳 到 页 首 " hre 伍 "#top"> 返 回 顶 部 </a></div> 
</div> 
</div> 
<!-- 底 部 --> 
<div 1d="footer"></div> 
<div 1d="copyright"> 
Kcopy:;2017<a href—="#" target=" black" >mysite.cn</a> all rights reserved 
</div> 
上 面 所 用 的 HIML 框架 代码 内 套 层次 只 有 3 层 ， 其 中 为 了 实现 圆 角 区 域 的 显示 效果 而 单独 悉 和 套 
多 层 div 元 素 除 外 。 
第 5 步 ， 按 Ctrl+S 快捷 键 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 显 示 效 果 如 图 1.13 所 示 ， 现 在 
还 没有 定义 CSS 代码 ， 所 以 看 到 的 还 不 是 最 终 效 果 。 





{CSS3+DIV} 


Hello World 第 一 个 CSS3+DIV 页 面 


以 下 代码 是 描 的 第 一 个 CSS3+4DIV 页 面 ， 该 页 百 红 色 居 中 显示 字符 串 Hello Worldl， 





图 1.13 页 面 的 HIML 结构 预览 效果 


第 6 步 ， 在 一 个 单独 的 文件 中 编写 CSS。 新 建 CSS 文档 ， 保 存 为 style.css， 文 件 扩展 名 为 .css。 
第 7 步 ，( 不 急于 编写 CSS 代码 ) 打开 index.html 文档 ， 在 <head> 标 签 内 插入 一 个 <link> 标 签 ， 
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输入 下 面 代码 ， 导 入 上 一 步 新 建 的 外 部 样式 表 文 件 。 


<!--[ 在 网 页 中 链接 外 部 样式 表 文 件 ]--> 
<LINK hre 舍 "Images/style.css" type=text/css rel=stylesheet> 





/#* 公共 属性 


SE 

html { min-width: 776px; } 

旋 页 面 属性 : 边 距 为 0， 字 体 颜色 为 黑色 ， 字 体 大 小 为 14 像素 ， 行 高 为 字体 大 小 的 1.6 倍 ， 居 中 对 齐 ， 背 
景色 为 天 蓝 色 ， 字 体 为 宋体 等 */ 

body { margin: 0px: padding: Opx; border: Opx; color: #000; font-size: 14px; line-height: 160%; text-align: center; 
background: #6D89DD:;: font-family: "宋体 ',' 新 宋体 ',arial,verdana,sans-serif: } 

/# 超 链接 属性 : 无 边 距 、 无 边框 、 无 下 划 线 ， 然 后 定义 正常 状态 下 的 颜色 、 访 问 过 的 颜色 和 鼠标 经 过 时 
的 颜色 并 显示 下 划 线 */ 

a { margin: Opx; padding: Opx; border: Opx:; text-decoration: none: } 

a:link { color: #E66133; } 

aivisited{ color: #E66133; } 

ahover{f color: #637DBC: text-decoration: underline; } 

/# 预定 义 格式 属性 : 无 首 行 缩 进 ， 浅 灰色 背景 ， 内 边 距 大 小 为 0， 外 边 距 为 0， 字 体 颜 色 为 蓝 色 */ 

pre { text-indent: 0; background: #DDDDDD:; padding: 0; margin: 0; color: blue; } 

上 # 顶部 布局 

人 

#top{ width: 776px; margin-right: auto; margin-left: auto: padding: Opx: height: 12px: background: 
url(images/bg topl].gif) #fff repeat-x left top; overflow: hidden: } 


#topl{ width: 776px; margin-right: auto; margin-left: auto; padding: Opx; height: 121px; } 

上 # 主体 布局 

| 

人/# 外 层 定义 背景 图 像 ， 实 现 麻 点 显示 效果 */ 

#main{ width: 776px: margin-right: auto; margin-left: auto; padding: 1.2em Opx; backeground: 
url(i1mages/bg dot].gif) #fff repeat left top; text-align: left; } 

/# 内 层 定义 背景 颜色 为 白色 ， 实 现 中 间 内 容 区 域 遮盖 麻 点 显示 */ 

#content{ width: 710px; margin-right: auto; margin-left: auto; padding: lem: background: #fff: } 

/# 大 标题 区 域 属性 */ 

#title { font-weight: bold; margin: Opx Opx 0.Sem Opx:; padding: 0.Sem Opx 0.Sem lem: font-size: 24px; color: 
#00A06B; text-align: left; border-bottom: solid #9EA3C] 2px: } 

上 # 小 标题 区 域 属性 */ 

.sub { color: #00A06B:; font-welght: bold:; font-size: 13px:; text-align: left: padding: lem 2em 0; background: 
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url(i1mages/0.g1f) #fff no-repeat lem 74%: } 

上 # 内 容 区 域 显示 属性 */ 

.content { text-indent: 2em:; font-size: 13px; margin-left: 2em: padding: lem 6px; } 

上 # 页 内 链接 区 域 属性 */ 

#gotop{ width: 100%; margin: Opx; padding: Opx; background: #fff; height: 2em; font-size: 12px; text-align: 
rnight; } 

上 # 底部 布局 

SP ED ey 

上 # 页 脚 装修 图 */ 

#footer{ clear: both: width: 776px; margin-right: auto:; margin-left: auto; padding: Opx; background: 
url(images/bg bottom.gif) #fff repeat left top: text-align: center: height: 39px: color: #ddd: } 

/* 版 权 信 息 */ 

#copyright{ width: 776px: margin-right: auto; margin-left: auto: padding: Spx Opx Opx Opx; backeground: #fff: 
text-align: center; height: 60px; line-height: 13px: font-size: 12px: color: #9EAOBB:; } 

#copyright a { color: #667EBE: } 

/# 圆 角 特效 

Et 

.box { background: url(1mages/nt.gif) repeat: } 

-tl { background: url(1mages/tl.gif) no-repeat top left: } 

.tr { background: url(1mages/tr.g1f) no-repeat top Tight: } 

-bl { background: url(i1mages/bl.gif) no-repeat bottom left: } 

.br { background: url(i1mages/br.gif) no-repeat bottom right; } 


读者 可 能 看 不 屋 上 面 的 CSS 代码 ， 不 过 没关系 ， 根 据 上 面 的 提示 简单 了 解 即 可 。 其 中 width 属 
性 用 来 定义 宽度 , background: url(images/bg bottom.gif) #fff repeat left top: 规 则 用 来 定义 背景 图 像 重 复 
铺展 显示 ， 其 中 url 指定 背景 图 像 的 地 址 ，repeat 属性 定义 铺展 显示 ，left top 表示 背景 图 像 的 起 始 位 
置 为 左上 角 。 

对 于 其 他 属性 ， 上 面 代码 中 已 有 解释 ， 读 者 可 以 答 试 阅读 一 下 ， 读 不 懂 也 没有 关系 ， 毕 竟 现 在 
仅 是 开始 。 相 信 随 着 学 习 的 深入 ， 一 定 会 明白 上 面 代码 的 意思 。 

另外， 本 节 实 例 没 有 使 用 CSS3 圆 角 属性 定义 区 块 圆 角 ,而 是 使 用 传统 方法 进行 设计 ， 主要 考虑 
初学 者 的 学 习 门 榴 ， 后 面 章 节 我 们 会 详细 介绍 。 

第 9 步 ， 按 Ctrl+S 快捷 键 保存 文档 ， 然 后 在 浏览 右 中 再 次 预览 页 面 ， 则 可 以 看 到 最 终 效 果 。 


1.5 在 线 练 习 


本 节 为 读者 提供 了 多 个 在 线 练习 ， 以 便 灵活 使 用 CSS， 强 化 基本 功 训练 。 感 义 趣 的 “号 芝 全 
读者 可 以 扫 码 练习 。 
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使 用 CSS3 选择 器 


CSS3 选择 器 在 CSS 2.1 选 择 器 的 基础 上 新 增 了 部 分 属性 选择 器 和 伪 类 选择 器 ， 减 少 对 
HTML 类 和 ID 的 依赖 ,使 编写 网 页 代码 更 加 简单 轻松 。 根 据 所 获取 页 面 中 元 素 的 不 同 ， 可 


以 把 CSS3 选择 器 分 为 $ 大 类 : 元 素 选 择 器 、 关 系 选 择 器 、 伪 类 选择 器 、 伪 对 象 选 择 器 和 属 
性 选择 器 。 本 章 将 详细 介绍 CSS3 各 类 选择 器 的 使 用 。 


【 学 习 要 点 】 

六 正确 使 用 CSS 基本 选择 器 。 

| 灵活 使 用 组 合 选 择 器 。 

六 事 握 属性 选择 器 和 伪 类 选择 器 的 应 用 。 
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2.1 元 素 选 择 器 


元 素 选 择 器 包括 标签 选择 器 、 类 选择 器 、ID 选择 器 和 通 配 选 择 器 。 
2.1.1 标签 选择 器 


标签 选择 器 也 称 为 类 型 选择 器 ， 直 接 引 用 HTML 标签 名 称 。 一 般 利 用 标签 选择 器 规定 标签 的 默 

【示例 】 本 示例 演示 了 如 何在 文档 中 定义 一 个 标签 样式 。 通 过 标签 选择 器 ， 统 一 定义 网 页 中 段落 
文本 的 样式 为 : 字体 大 小 为 12 像素 ， 字 体 颜 色 为 红色 。 实 现 上 述 默认 段落 文本 效果 ， 可 以 利用 标签 
选择 器 定义 如 下 样式 。 


pi 
font-size:12px: /# 字体 大 小 为 12 像素 */ 
color:red: /* 字体 颜色 为 红色 */ 

} 


在 网 页 设计 中 ， 常 用 标签 选择 器 设计 网 页 献 认 显示 效果 ， 或 者 统一 常用 元 素 的 基本 样式 。 标 签 
选择 器 在 CSS 样式 表 中 容易 管理 ， 因 为 它们 部 与 标签 同名 。 


2.1.2 ”类 选择 器 


类 选择 器 以 一 个 点 〈.) 前 级 开头 ， 然 后 跟随 一 个 自 定义 的 类 名 。 类 选择 器 能 够 为 网 页 对 象 定义 
不 同 的 样式 ， 实 现 不 同 元 素 拥有 相同 的 样式 ， 相 同 元 素 的 不 同 对 象 拥有 不 同 的 样式 。 

应 用 类 样式 可 以 使 用 class 属性 来 实现 ,HTML 所 有 元 素 都 支持 该 属性 ， 只 要 在 标签 中 定义 class 
属性 ， 然 后 把 该 属性 值 设置 为 事先 定义 好 的 类 选择 器 的 名 称 即 可 。 
【示例 1】 本 示例 完整 演示 了 如 何 使 用 类 样式 设计 段落 文本 效果 。 利 用 类 选择 器 为 页 面 中 3 个 相 
邻 的 段落 文本 对 象 定义 不 同 的 样式 ， 其 中 第 1 和 第 3 段 文 本 的 字体 大 小 为 12 像素 、 颜 色 为 红色 ， 第 
”2 段 文本 的 字体 大 小 为 18 像素 、 颜 色 为 红色 。 
第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 在 <body> 标 签 内 输入 以 下 3 段 段落 文本 。 
<p> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</p> 


<p> 前 不 断 ， 理 还 乱 ， 是 离愁 。 别 是 一 般 滋味 在 心头 。</p> 
<p> 独 自 莫 凭 栏 ， 无 限 江山 ， 别 时 容易 见 时 难 。 流 水 落花 春 去 也 ， 天 上 人 间 。</p> 


第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 
| 第 3 步 ， 通 过 标签 选择 器 将 所 有 段落 文本 的 字体 大 小 定义 为 12 像素 ， 字 体 颜 色 定义 为 红色 ， 代 
” 码 如 下 。 


了 
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pi 
font-size:12px; ”/* 字体 大 小 为 12 像素 */ ] 
color:red; /# 字体 颜色 为 红色 */ 





} 
第 4 步 ， 如 果 仅 定义 第 2 段 文本 的 字体 大 小 为 18 像素 ， 这 时 就 可 以 使 用 类 选择 器 。 假 设 定义 一 


个 18 像素 大 小 的 字体 类 ， 代 码 如 下 。 
.font18px { font-slze:18px:} 
第 5 步 ， 在 第 2 段 段落 标签 中 引用 font18px 类 样式 ， 代 码 如 下 。 


<p> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</p> 
<p class="font18px"> 剪 不 断 ， 理 还 乱 ， 是 离愁 。 别 是 一 般 滋 味 在 心头 。</p> 
<p> 独 自 黄 凭栏 ， 无 限 江山 ， 别 时 容易 见 时 难 。 流 水 落花 春 去 也 ， 天 上 人 间 。</p> 


第 6 步 ， 在 浏览 器 中 预览 的 效果 如 图 2.1 所 示 ， 此 时 可 以 看 到 3 段 文本 的 显示 样式 ， 其 中 第 2 
段 文 本 被 单独 放大 显示 。 


Xx 


Oo/eahosm Peo n 六 芭 


问 用 能 有 几 多 息 ， 恰 似 一 江 春水 向 东 流 。 


前 不 断 ， 理 还 乱 ， 是 离愁 。 别 是 一 般 滋味 在 心头 。 


独自 莫 任 栏 ， 无 限 江山 ， 别 时 容易 见 时 难 。 流 水 滞 社 春 去 也 ， 天 上 作 间 |。 





2.1 类 选择 器 应 用 效果 


【示例 2】 本 示例 演示 了 如 何在 对 象 中 应 用 多 个 样式 类 。class 属性 可 以 包含 多 个 类 ， 因 此 可 以 设 


计 复 合 样式 类 。 用 户 可 以 按 如 下 步骤 上 机 练习 体验 。 
第 1 步 ， 复 制 示 例 1 中 文档 ， 并 在 内 部 样式 表 中 定义 3 个 类 : font18px、underline 和 italic。 
第 2 步 ， 在 段落 文本 中 分 别 引 用 这 些 类 ， 其 中 第 2 段 文 本 标签 引用 了 3 个 类 ， 代 码 如 下 ， 演 示 


效果 如 图 2.2 所 示 。 


<style type="text/css"> 

Pp {/* 段落 默认 样式 */ 
font-size: 12px; 
color:red; 


} 
.font18px {/* 字体 大 小 类 */ 


/# 字体 大 小 为 12 像素 */ 
/#* 字体 颜色 为 红色 */ 


x 
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font-size: 1 8px: /# 字体 大 小 为 18 像素 */ 
} 

.underline {/* 下 划 线 类 */ 
text-decoration:underline: /* 字体 修饰 为 下 划 线 */ 
} 

.italic {/* 斜体 类 */ 
font-style:italic: /# 字体 样式 为 斜体 */ 
} 

</style> 


<p class="underline"> 问 君 能 有 几 多 愁 ， 恰 似 一 江 春 水 向 东 流 。</p> 
<p class="font18px italic underline"> 极 不 断 ， 理 还 乱 ， 是 离愁 。 别 是 一 般 滋 味 在 心头 。</p> 
<p class="italic"> 独 自 莫 凭 栏 ， 无 限 江 山 9 别 时 容易 见 时 难 。 流水 落花 春 去 也 ， 天 上 人 间 o </p> 





、 ue) ES http://localhos/m P - Bo | EG ces 
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可 属 能 有 几 和 多 悉 ， 恰 作 一 ; 器 示 流 。 
叉 下 崭 ， 理 还 天 ， 震 访 夭 。 世 是 一 般 游 必 产 心头 。 


关 筷 识 估 大 ， 无 斌 并 省， 葛 时 仁和 邱 包 拘 颈 。 洲 锥 诗 众人 营 去 从 ,天 上 人 A 阅 : 








图 2.2 多 类 引用 应 用 效果 


2.1.3 ID 选择 器 


ID 选择 器 以 井 号 〈#) 作为 前 级 ， 接 着 是 一 个 自 定义 的 有 D 名 。 应 用 ID 选择 器 可 以 使 用 id 属性 
来 实现 ，HTML 所 有 元 素 都 支持 该 属性 ， 只 要 在 标签 中 定义 id 属性 ， 然 后 把 该 属性 值 设置 为 事先 定 
义 好 的 ID 选择 器 的 名 称 即 可 。 

【示例 1】 本 示例 演示 了 如 何在 文档 中 设置 ID 样式 。 

第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 在 <body> 标 签 内 输入 <div> 标 签 。 


<div id="box"> 问 君 能 有 几 多 愁 ， 恰 似 一 江 春 水 回 东 流 。</div> 


第 2 步 ， 在 <head> 标 签 内 添加 <style type='"textcss"> 标 签 ， 定 义 一 个 内 部 样式 表 。 然 后 为 该 盒子 
定义 固定 宽 和 高 ， 并 设置 背景 图 像 ， 以 及 边框 和 内 边 距 大 小 ， 代 码 如 下 。 


#box {/* ID 样式 */ 
background:url(images/2.jpg) center bottom: ” /* 定义 背景 图 像 并 居中 、 底 部 对 齐 */ 
height:200px: /# 固定 盒子 的 高 度 */ 
Width:400px: /# 固定 盒子 的 宽度 */ 


。D4 。 
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border:solid 2px red: /# 边框 样式 */ 
padding:100px; 上 # 增加 内 边 距 */ 
} 
第 3 步 ， 在 浏览 费 中 预先 ， 则 显示 效果 如 图 2.3 所 示 。 





Ee sel SS http://localhost/mysite/test.html DP- BclScssEu 





问 关 能 有 几 多 杷 汪 怡 似 一 和 江 春 水 同和 东 沉 





2.3 JID 选择 器 的 应 用 效果 


也 可 以 为 ID 选择 器 指定 标签 范围 。 采 用 这 种 方法 能 够 提高 该 样式 的 优先 级 。 

【示例 2】 针 对 上 面 示例 ,在 ID 选择 器 前 面 增加 一 个 <div> 标 签 ， 这 样 div#box 选择 器 的 优先 级 
会 大 于 #box 选择 器 的 优先 级 。 在 同等 条 件 下 ， 浏 览 器 会 优先 解析 div#box 选择 器 定义 的 样式 ， 代 
码 如 下 。 


<style type="text/css"> 
div#box {l* ID 样式 */ 
background:url(images/bg1.gif) center bottom: /* 定义 背景 图 像 并 居中 、 底 部 对 齐 */ 


height:200px: /# 固定 盒子 的 高 度 */ 
width:400px: /# 固定 盒子 的 宽度 */ 
border:solid 2px red: /# 边框 样式 */ 
padding:20px; 上 # 增加 内 边 距 */ 
} 

</style> 


<div id="box"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</div> 
注意 ， 也 可 以 使 用 这 种 方式 限制 类 选择 器 的 应 用 范围 ， 并 增加 其 优先 级 。 


2.1.4” 通 配 选择 器 
| 
如 果 HTML 所 有 元 素 都 需要 定义 相同 的 样式 ， 这 时 不 妨 使 用 通 配 选择 器 。 通 配 选择 器 是 固定 的 ， ， 视频 i 


es。 ID 。 
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。 它 使 用 星 号 (*) 来 表示 。 

: 【示例 】 针 对 上 面 示例 中 清除 边 距 样式 ， 可 以 使 用 下 面 方式 来 定义 。 
margin: 0; 
padding: 0; 





2.2 ”关系 选择 器 


把 两 个 基本 选择 器 组 合 在 一 起 ， 就 形成 了 一 个 复杂 的 关系 选择 器 ， 通 过 关系 选择 器 可 以 精确 匹 
配 页 面 元 素 。 


2.2.1 包含 选择 器 


包含 选择 器 通过 空格 标识 符 来 表示 ， 前 面 的 一 个 选择 器 表示 包含 框 对 象 的 选择 右 ， 而 后 面 的 选 
择 孝 表示 被 包含 的 选择 器 ， 如 图 2.4 所 示 。 
包含 选择 符 名 选择 符 声明 


包含 选择 符 标识 符 被 包含 选择 符 名 属性 ”属性 值 
图 2.4 包含 选择 器 
【示例 】 本 示例 演示 了 如 何 使 用 包含 选择 器 为 不 同 层次 下 的 标签 定义 样式 。 
局 动 Dreamweaver， 新 建 一 个 网 页 ， 在 <body> 标 签 内 输入 如 下 结构 。 








<div 1d="wrap"> 
<div 1d="header"> 
<p> 头 部 区 域 第 1 段 文 本 </p> 
<p> 头 部 区 域 第 2 段 文本 </p> 
<p> 头 部 区 域 第 3 段 文本 </p> 
</div> 
<div 1d="main"> 
<p> 主 体 区 域 第 1 段 文本 </p> 
<p> 主 体 区 域 第 2 段 文本 </p> 
<p> 主 体 区 域 第 3 段 文 本 </p> 
</div> 
</div> 


。I0。 
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在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 然 后 定义 样式 ， 希 望 实 
现 如 下 设计 目标 。 

名 ”定义 <div id="header"> 包 含 框 内 的 段落 文本 字体 大 小 为 14 像素 。 

加 ”定义 <div id="main"> 包 含 框 内 的 段落 文本 字体 大 小 为 12 像素 。 

这 时 可 以 利用 包含 选择 器 来 快速 定义 它们 的 样式 ， 代 码 如 下 。 





#header p { font-size:14px;} 
#main p {font-size:12px;} 


2.2.2 子 选 择 器 
子 选择 器 使 用 尖 角 号 (>) 表示 ， 子 选择 器 是 指定 父 元 素 所 包含 的 子 元 素 ， 如 图 2.5 所 示 。 
父 级 选择 符 名 选择 符 声明 


| font-size : 18pX: | 


子 选 择 符 标 识 和 从 子 级 选择 竺 名 属性 ”属性 值 
图 2.5 子 选 择 器 


【示例 】 本 示例 演示 了 如 何 使 用 子 选择 器 为 不 同 结构 中 的 标签 定义 样式 。 
启动 Dreamweaver， 新 建 一 个 网 页 ， 在 <body> 标 签 内 输入 如 下 结构 。 





<h2> 
<span>HTML 文档 树 状 结构 </span> 
</h2> 


<div 1d="box"> 
<span class="font24px"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 问 东 流 。</span> 
</div> 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定义 一 个 内 部 样式 表 。 然 后 定义 所 有 span 元 素 
的 字体 大 小 为 12 像 杂 ， 再 利用 子 选择 器 来 定义 所 有 div 元 素 包 含 的 子 元 素 span 的 样式 为 24 像素 ， 
代码 如 下 。 
span {/* span 元 素 的 默认 样式 */ 
font-size:12px; ”/* 字体 大 小 为 12 像素 */ 
} 
div > span {/* div 元 素 包 含 的 span 子 元 素 的 默认 样式 */ 
font-size:24px; ”/* 字体 大 小 为 24 像素 */ 
} 


在 浏览 器 中 预览 ， 显 示 效 果 如 图 2.6 所 示 。 


se。 IIAI。 
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eS re/ oo o- sclecsss “lb, 
HTMI 文 档 树 状 结构 


问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 同 东 流 。 





图 2.6 子 选 择 器 应 用 效果 
从 图 2.6 可 以 看 到 ， 包 含 在 div 元 素 内 的 子 元 素 span 被 定义 了 字体 大 小 为 24 像素 。 通 过 这 种 方 
式 可 以 准确 定义 某 个 或 一 组 子 元 素 的 样式 ， 而 不 再 为 它们 定义 ID 属性 或 者 Class 属性 。 
2.2.3” 相 邻 选择 话 


相 邻 选择 器 通过 加 号 〈+) 分 隐 符 进行 定义 。 其 基本 结构 是 第 1 个 选择 需 指 定 前 面相 邻 元 素 ， 后 
面 的 选择 噩 指定 后 面相 邻 元 素 ， 如 图 2.7 所 示 。 前 后 选择 符 的 关系 是 兄弟 关系 ， 即 在 HTML 结构 中 ， 
两 个 标签 前 为 “ 兄 ” 后 为 “第 ”， 否 则 样式 无 法 应 用 。 








图 2.7 相 邻 选择 器 结构 
【示例 】 在 本 示例 中 ， 通 过 4 种 情况 测试 相 邻 选择 符 的 应 用 范围 ， 代 码 如 下 。 


<style type="text/css"> 


h2,p,h3 { 
margin: 0; /# 清除 默认 边 距 */ 
padding: 0; 上 # 清除 默认 间距 */ 
height: 30px: /# 初始 化 设置 高 度 为 30 像素 */ 
} 
p+h3 { background-color: #0099FF: /# 设置 背景 色 */ 
} 


。D8 。 





第 2 章 使 用 CSS3 这 择 器 FS 


</style> 


<div class="header"> 
<h2> 情 况 一 : </h2> 
<p> 子 选择 器 控制 p 标签 ， 能 控制 我 吗 </p> 
<h3> 子 选择 器 控制 p 标签 </h3> 
<h2> 情 况 二 : </h2> 
<div> 我 隔 开 段 落 和 h3 直接 </div> 
<p> 子 选择 器 控制 p 标签 ， 能 控制 我 吗 </p> 
<h3> 相 邻 选择 器 </h3> 
<h2> 情 况 三 : </h2> 
<h3> 相 邻 选 择 器 </h3> 
<p> 子 选择 器 控制 p 标签 ， 能 控制 我 吗 </p> 
<div> 
<h2> 情 况 四 : </h2> 
<p> 子 选择 器 控制 p 标签 ， 能 控制 我 吗 </p> 
<h3> 相 邻 选择 器 </h3> 
</div> 
</div> 





在 浏览 器 中 预览 ， 页 面 效 果 如 图 2.8 所 示 。 











全 http://localhost/mysite/ PD ~- GE localhost 
= 
日 


子 选择 


td 





器 控制 p 标 签 ， 能 控制 我 吗 








一 一 





情况 二 : 
我 隔 开 段落 和 3 直接 
子 选 择 器 控制 p 标 签 ， 能 控制 我 吗 


分 为 4 种 情况 分 析 相 邻 选择 器 影响 
的 范围 。p+h3， 代 表 <p> 标 签 为 见 
元 素 、h3 标 签 为 弟 元 素 。 















情况 三 : 
相 邻 选 择 器 

子 选 择 器 控制 p 标 签 ， 能 控制 我 吗 
情况 四 : 

子 选 择 器 控制 p 标 签 ， 能 控制 我 吗 


图 2.8 相 邻 选择 器 


在 上 面 示 例 中 ， 将 相 邻 选择 器 分 成 4 种 情况 进行 分 析 。 

第 1 种 : 正 旬 情况 下 ，<p> 标 答 和 <h3> 标 位 是 兄 种 元素; 

第 2 种 : 添加 一 个 <div> 标 签 ， 将 <p> 标 签 和 <h3> 标 签 与 第 1 种 情况 进行 间隔 ， 测 试 在 有 元 素 间 
隔 时 ， 样 式 是 否 有 效 ; 


“D0 so 





第 3 种 ，<h3> 标 签 为 见 元 素 、<p> 标 签 为 弟 元 素 ， 测 试 是 否 受 影响 
第 4 种 : 为 <p> 标 签 和 <h3> 标 签 添加 一 个 父 层 ， 查 看 是 否 受 影响 
通过 浏览 器 预览 发 现 :第 1 种 情况 、 第 2 种 情况 、 第 4 种 情况 均 有 效 ， 第 3 种 情况 无 效 。 相 久 





器 是 有 区 别 的 。 
2.2.4 兄弟 选择 器 


CSS3 增加 了 一 种 新 的 选择 占 组 合 形式 一 一 兄 第 选择 顷 。 它 通过 波浪 (~) 分 隅 符 进 行 定 义 。 
其 基本 结构 是 第 1 个 选择 器 指定 同 级 前 置 元 系 ， 后 面 的 选择 需 指 定 其 后 同 级 所 有 匹配 元 系 ， 如 图 2.9 
所 示 。 前 后 选择 符 的 关系 是 兄弟 关系 ， 即 在 HTML 结构 中 两 个 标签 前 为 “ 兄 ” 后 为 “ 弟 ”， 否则 


样式 无 法 应 用 。 
通过 波浪 号 链接 前 后 选择 符 











“ 兄 ” 选 择 符 名 称 





“ 弟 ” 选 择 符 名 称 


图 2.9 兄弟 选择 器 结构 


兄弟 选择 器 能 够 选择 前 置 元 素 后 同 级 的 所 有 [匹配 元 素 ， 而 相 邻 选择 器 只 能 选择 前 置 元 素 后 相 邻 
的 一 个 匹配 元 素 。 

【示例 】 以 上 节 示 例 为 基础 ， 修 改 其 中 的 p+h3 { background-color: #0099FF; } 样 式 为 p ~ h3 
{ background-color: #0099FF:; }， 有 具体 样式 代码 如 下 。 


h2,p,h3 { 
margin: 0; /# 清除 默认 边 距 */ 
padding: 0; /# 清除 默认 间距 */ 
height: 30px: /# 初始 化 设置 高 度 为 30 像素 */ 
} 
p~h3 {background-color: #0099FF:} /# 设置 背景 色 */ 


在 浏览 器 中 预览 ， 则 页 面 效 果 如 图 2.10 所 示 。 可 以 看 到 在 <div class="header"> 包 含 杠 中 ， 位 于 
<p> 标 签 后 的 所 有 <h3> 标 签 都 被 选中 ， 设 置 背 景色 为 蓝 色 。 


。30 。 
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一 -一 全 


情况 一 : 
子 选 择 器 控制 p 标 签 ， 能 控制 我 吗 





月 : 
我 隔 开 段落 和 h3 直 接 
人 


落 和 h3 直 接 
子 选择 器 控制 p 标 签 ， 能 控制 我 吗 


情况 三 : 
和 这 拌 伟 控 
情况 四 : 
子 选择 器 控制 p 标 签 ， 能 控制 我 吗 


图 2.10 ”兄弟 选择 器 





2.2.5 ”分 组 选择 器 


分 组 选择 占 通 过 逗号 (,) 分 隅 符 进 行 定义 。 其 基本 结构 是 第 一 个 选择 器 指定 匹配 元 素 ， 后 面 的 
选择 句 指 定 另 一 个 匹配 元 素 ， 最 后 把 前 后 选择 需 匹 配 的 元 素 都 选取 ， 如 图 2.11 所 示 。 

通过 分 组 选择 器 可 以 实现 集体 声明 ， 将 样式 表 中 一 致 的 CSS 样式 放 在 一 起 ， 接 看 将 这 些 选择 器 
用 去 号 链接 ， 以 减少 代码 的 书写 量 。 


通过 恕 号 链接 前 后 选择 咒 












前 后 为 应 用 相同 的 样式 
前 后 为 应 用 相同 的 样式 


图 2.11 分 组 选择 器 
【示例 】 在 本 示例 中 ， 将 上 面 学 过 的 复合 选择 器 通过 分 组 选择 器 集中 声明 ， 代 码 如 下 。 





<style type="text/css"> 

hl, h2, h3, h4, h5, h6 { 
background-color: #99CC33; /# 设置 背景 色 */ 
margin: 0; 上 清除 标题 的 默认 外 边 距 */ 
margin-bottom: 10px: /# 使 用 下 边 距 拉 开 各 个 标题 之 间 的 距离 */ 
} 

hl1+h2, h2+h3, h4+h5 { color: #0099FF:} /# 兄弟 关系 设置 字体 的 颜色 */ 


。31。 
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body>h6, hl>span, h4>span { font-size: 20px:} /# 子 选择 器 设置 字体 的 大 小 */ 

h2 span, h3 span { padding: 0 20px:} /# 设置 <span> 标 签 的 左右 间距 */ 

hs span[class], h6 span[class] { background-color: #CC0033:} /* 为 h5、h6 标 题 中 含有 class 属性 的 <span> 标 签 
设置 背景 色 */ 

</style> 


<hl1>hl 元 素 <span> 这 里 是 span 元 素 </span></h1> 
<h2>h2 元 素 <span> 这 里 是 span 元 素 </span></h2> 
<h3>h3 元 素 <span> 这 里 是 span 元 素 </span></h3> 
<h4>h4 元 素 <span> 这 里 是 span 元 素 </span></h4> 
<h5>h5 元 素 <span class="S1"> 这 里 是 span 元 素 </span></h5> 
<h6>h6 元 素 <span class="S2"> 这 里 是 span 元 素 </span></h6> 


在 浏览 器 中 预览 ， 页 面 效 果 如 图 2.12 所 示 。 


evoconsmprscleone 于 
hl 元 素 这 里 是 span 元 素 
h2 元 素 这 里 是 span 元 素 


h3 元 素 ”这 里 是 span 元 素 





图 2.12 分 组 选择 器 


在 上 面 示 例 中 ,将 <h1>~<h6> 标 签 设置 背景 色 为 #99CC33， 清 除 默 认 边 距 ， 通 过 下 边 距 区 分 标题 
标签 的 空间 。hl+h2,h2+h3,h4+h5 代表 3 种 兄弟 元 素 均 设置 字体 颜色 为 #0099FF; body>h6， 
hl>span,h4>span 代表 <body> 标 签 的 子 元 素 <h6>、<h1> 标 签 的 子 元 素 <span>、<h4> 标 签 的 子 元 素 
<span> 这 3 种 情况 下 的 字体 大 小 为 20 像素 ; h2 span,h3 span 代表 <h2> 标 签 内 的 <span>、<h3> 标 签 内 
的 <span> (子孙 奉 篆 可 ) 左右 边 距 为 20 像素 ; hs span[class],h6 span[class] 代 表 <h5> 标 签 中 的 <span> 
标签 含有 Class 属性 、<h6> 标 签 中 的 <span> 标 签 含 有 class 属性 ， 背 景色 为 #CC0033。 


2.3 ”属性 选择 器 


CSS3 在 CSS2 基础 上 新 增加 了 3 个 属性 选择 器 ， 如 El[attr^="value"] 、E[attr$="value"] 和 
E[attr*="value"]。 这 7 个 属性 选择 器 具体 说 明 如 下 。 
四 Erattr]: 只 使 用 属性 名 ， 但 没有 确定 任何 属性 值 。 


es。 QI。 
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四 Eratt="value"]: 指定 属性 名 ， 并 指定 了 该 属性 的 属性 值 。 

加 ”El[attr~="value"]: 指定 属性 名 ， 并 且 具 有 属性 值 ， 此 属性 值 是 一 个 词 列 表 ， 并 且 以 空格 隔 
开 ， 其 中 词 列 表 中 包含 了 一 个 value 词 ， 而 且 等 号 前 面 的 ~ 不 能 不 写 。 

名 ”El[attr^="value"]: 指定 属性 名 ， 并 且 有 属性 值 ， 属 性 值 是 以 value 开头 的 。 

四 Erattr$="value"]: 指定 属性 名 ， 并 且 有 属性 值 ， 属 性 值 是 以 value 结束 的 。 

名 ”El[attr*="value"]: 指定 属性 名 ， 并 且 有 属性 值 ， 而 且 属 值 中 包含 了 value。 

四 E[attr|="value"]: 指定 属性 名 ， 并 且 属 性 值 是 value 或 者 以 value- 开 头 的 值 〈 如 zh-cn)。 

提 


是 示 : 在 上 面 的 语法 形式 中 ,，E 表示 匹配 元 素 的 选择 符 ， 可 以 省 略 ; 中 括号 为 属性 选择 器 标识 
符 ， 不 可 或 缺 ; attr 表示 HTML 属性 名 ; value 表示 HTML 属性 值 或 者 HTML 属性 值 包 
含 的 子 字符 串 。 


目前 ， 主 流 浏 览 器 都 支持 属性 选择 器 ， 虽 然 早期 正 浏览 右 存 在 不 兼容 问题 ， 如 下 6， 但 不 影响 


属性 选择 器 的 普及 和 使 用 。 


【示例 】 为 了 更 好 地 演示 CSS3 属性 选择 器 的 应 用 ,本 示例 将 设计 一 个 简单 的 图 片 灯箱 导航 示例 ， 


其 中 HTML 结构 如 下 。 


<div class="pic box"> 
<lmg src="i1mages/bgl1.jpg" /> 
<div class="nav"> 
<a href—="#1" class="links item first" title="w3cplus" target=" blank" 1d="first" >1</a> 
<a href—"#2" class="links active item" title="test website" target=" blank" lang="zh">2</a> 
<a href—"#3" class="links item" title="this 1s a link" lane="zh-cn">3</a> 
<a href—"#4" class="links item" target=" balnk" lange="zh-tw">4</a> 
<a href—"#5" class="links item" title="zh-cn">5</a> 
<a href—="#6" class="links item" title="website link" lang="zh">6</a> 
<a href—"#7" class="links item" title="open the website" lang="cn">7</a> 
<a href—"#8" class="links item" title="close the website" lang="en-zh">8</a> 
<a href—="#9" class="links item" title="http://www.baidu.com">9</a> 
<a href—"#10" class="links item last" 1d="last">10</a> 
</div> 
</div> 


使 用 CSS 适当 美化 该 结构 块 ， 具 体 代 码 如 下 所 示 ， 预 览 效 果 如 图 2.13 所 示 。 


<style type="text/css"> 

* 灯 箱 外 框 样式 */ 

.plc_ box { border: solid 6px #bbb; position: relative; float: left: } 
.plc box Img { border: solid 1pxred: } 

此 导航 框 样式 */ 


。33.。 
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.nav { background: #fff: border: 1px solid #aaa: padding: 6px 12px: float: left: position: absolute: bottom: 6px: 
right: 12px; } 
/号 航 接 角 样式 
.nav a { float: left; display: block: height: 20px:; line-height: 20px; width: 20px; -moz-border-radius: 10px; 
-webkit-border-radius: 10px; border-radius: 10px; text-align: center; background: #f00; color: ff margin-right: Spx:; 
text-decoration: none; } 
.nav a:hover { background: green; } 
</style> 





O00O0000000 





图 2.13 设计 的 灯箱 广告 效果 图 
下 面 结合 这 个 示例 ， 有 具体 分 析 每 个 属性 选择 器 的 使 用 方法 。 
1. Efattr] 
E[attr] 属 性 选择 器 可 以 选择 包含 指定 属性 的 元 素 ， 例 如 : 
nav a[id] {background: blue; color:yellow;font-weight:bold:} 


上 面 代 码 表示 的 是 ， 选 择 了 div.nav 下 所 有 带 有 id 属性 的 a 元素， 并 在 这 个 元 素 上 使 用 背景 色 为 
蓝 色 ， 前 景色 为 黄色 ， 字 体 加 粗 的 样式 。 对 照 上 面 的 HTML 结构 不 难 发 现 ， 只 有 第 一 个 和 最 后 一 个 
链接 使 用 了 id 属性 ， 所 以 选中 了 这 两 个 a 元 素 ， 效 果 如 图 2.14 所 示 。 

也 可 以 指定 多 属性 : 


.nav a[hrefl[bhtle] {background: yellow:; color:green:} 


上 面 代码 表示 的 是 ， 选 择 div.nav 下 的 同时 具有 href 和 title 两 个 属性 的 a 元 素 ， 效 果 如 图 2.15 
所 示 。 


和 


第 之 章 使 用 CSS3 这 择 器 





0ee0oooooo0 


图 2.14 属性 快速 匹配 图 2.15 多 属性 快速 匹配 


2. Elattr="value"| 
El[att="value"] 选 择 右 能 精确 选择 需要 的 元 素 ， 例 如 : 





图 二 


.nav alid="first"| {background: blue: color:yellow:font-welght:bold:} 


选中 div.nav 中 的 a 元 素 ， 并 且 这 个 元 素 有 一 个 id="first" 属 性 值 ， 则 预览 效果 如 图 2.16 所 示 。 
E[attr="value"] 属 性 选择 器 也 可 以 多 个 属性 并 写 ， 进 一 步 缩 小 选择 范围 ， 用 法 如 下 所 示 ， 则 预览 
效果 如 图 2.17 所 示 。 


.nav alhref—="#1"][title| {background: yellow: color:green;} 
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图 2.16 属性 值 快速 匹配 图 2.17 多 属性 值 快速 匹配 


3. Elattr~="value"| 
E[attr~="value"] 属 性 选择 器 匹配 一 个 或 多 个 词 列 表 ， 如 果 是 列表 ， 则 需要 用 空格 隔 开 ， 只 要 属性 
值 中 有 一 个 value 相 匹 配 就 可 以 选中 该 元 素 。 例 如 : 


.nav altitle~="website"|{background:orange;color:green;} 


在 divnav 下 的 a 元 素 的 title 属性 中 ， 只 要 其 属性 值 中 含有 website 这 个 词 就 会 被 选择 ， 结 果 a 
元 素 中 “2”“6”“7”“8” 这 4 个 a 元 素 的 title 中 都 含有 ， 所 以 被 选中 ， 如 图 2.18 所 示 。 


4. Elattr^="value"| 


E[attr^ 一 "value"] 属 性 选择 器 选择 attr 属性 值 以 value 开头 的 所 有 元 素 ， 例 如 : 


.nav altitle^="http://"|]{background:orange:color:green;} 


.nav a[title^="mailto:"|{background:green:color:orange;} 


上 面 代 码 表示 的 是 选择 了 title 属性 , 并 且 以 "http:/" 和 "mailto:" 开 头 的 属性 值 的 所 有 a 元 素 , 匹配 
效果 如 图 2.19 所 示 。 


O0000000@000 O000000000 


图 2.18 属性 值 局 部 词 匹 配 图 2.19 ”匹配 属性 值 开头 字符 串 的 元 素 


$. Elattr$="value"| 
E[attr$="value"] 表 示 选 择 attr 属性 值 以 value 结尾 的 所 有 元 素 ， 例 如 : 


。 .35D。 
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nav a[href$="png"] {background:orange:color:green:} 
上 面 代 码 表示 选择 div.nav 中 元 素 有 href 属性 ， 并 以 png 结尾 的 a 元素。 

6. E[attr*="value"] 

E[attr*="value"] 属 性 选择 器 表示 选择 attr 属性 值 中 包含 子 串 "value" 的 所 有 元 系 。 例 如 : 


.nav altitle*="site"]{background:black;color:white;} 


上 面 代码 表示 选择 div.nav 中 a 元素 的 title 属性 中 只 要 有 "site" 字 符 串 的 元 素 。 上面 样式 的 预 究 效 


果 如 图 2.20 所 示 。 


7. Elattr="value"| 
E[attr|="value"] 选 择 器 会 选择 attr 属性 值 等 于 value 或 以 value- 开 头 的 所 有 元 素 ， 例 如 : 


.nav a[lang|="zh"]{background:gray:color:yellow:} 


上 面 代码 会 选中 div.nav 中 lang 属性 等 于 砌 或 以 劲 -开头 的 所 有 a 元 素 ， 如 图 2.21 所 示 。 
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图 2.20 匹配 属性 值 中 的 特定 子 串 图 2.21 匹配 属性 值 开头 字符 串 的 元 素 


2.4 伪 类 选择 器 


伪 类 选择 器 包括 伪 类 和 伪 对 象 选 择 器 ， 伪 类 选择 吉 以 冒号 〈:) 作为 前 级 标识 符 。 冒 号 前 可 以 添 


加 选择 符 ， 限 定 伪 类 应 用 的 范围 ， 冒 号 后 为 伪 类 和 伪 对 象 名 ， 冒 号 前 后 没有 空格 ， 如 图 2.22 所 示 。 






通过 冒号 链接 前 后 选择 符 







font-size: 1 8px: 





图 2.22 伪 类 选择 器 结构 


窑 提示: CSS 伪 类 选择 器 有 以 下 两 种 用 法 。 


。 30。 
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四 单纯 式 
E:pseudo-class { property:value} 
其 中 下 为 元 素 ，pseudo-class 为 伪 类 名 称 ，property 是 CSS 的 属性 ，value 为 CSS 的 属性 值 。 例 如 : 


a:link {color:red;} 





加 ”混用 式 
E.class:pseudo-class {property:value} 


其 中 .class 表示 类 选择 符 。 把 类 选择 符 与 伪 类 选择 符 组 成 一 个 混合 式 的 选择 器 ， 能 够 设计 更 复杂 
的 样式 ， 以 精准 匹配 元 素 。 例 如 : 


a.selected:hover {color: blue:} 


2.4.1 动态 伪 类 \ 加 
动态 伪 类 是 一 类 行为 类 样式 ， 只 有 当 用 户 与 页 面 进行 交互 时 才 有 效 ， 包 括 以 下 两 种 形式 。 ES 


名” 销 点 伪 类 ， 如 :link、:visited。 
加” 行为 伪 类 ， 如 :hover、:active 和 :focus。 
【示例 】 本 示例 将 使 用 动态 伪 类 选择 器 设计 一 组 3D 动态 效果 的 按钮 样式 ， 效 果 如 图 2.23 所 示 。 








ee 


ER 概 攻 所 格 区 全 





图 2.23 设计 3D 按钮 样式 


【操作 步骤 

第 1 步 ， 设计 一 个 HTML 文档 结构 。 创 建 一 个 新 的 HTML 文档 ， 并 添加 一 个 列表 ， 在 列表 项 中 
包含 基本 的 销 链 接 。 就 这 么 简单 ， 不 需要 任何 额外 的 <div> 或 者 <span> 标 签 ， 也 不 用 添加 id 和 class 
属性 ， 一 切 效果 都 通过 CSS 进行 控制 。 结 构 代码 如 下 。 


<ul 1d="container"> 
<]li><a hre 伍 "#" class="button gray"> 灰 色 风 格 按钮 </a></li> 
<]i><a hre 伍 "#" class="button pink"> 粉 红 风 格 按 钮 </a></li> 
<]i><a hre 伍 "#" class="button blue"> 蓝 色 风 格 按钮 </a></li> 
<]i><a hre 伍 "#" class="button green"> 绿 色 风 格 按 钮 </a></li> 
<]i><a hre 住 "#" class="button turquoise"> 天 蓝 色 风 格 按 钮 </a></li> 
<]i><a hre 伍 "#" class="button black"> 黑 色 风 格 按钮 </a></li> 


es。 AAA。 
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<]i><a href="#" class="button darkgray"> 深 灰色 风格 按钮 </a></li> 

<]i><a href 人 f="#" class="button yellow"> 黄 色 风 格 按 钮 </a></li> 

<]i><a href 伍 "#" class="button purple"> 紫 色 风 格 按钮 </a></li> 

<]i><a hre 伍 "#" class="button darkblue"> 深 蓝 色 风 格 按 钮 </a></li> 
</ul> 





为 了 能 够 演示 不 同色 彩 的 CSS 样式 ， 通 过 列表 结构 设计 一 组 类 似 的 按钮 。 给 每 一 个 按钮 定义 一 
类 不 同 的 颜色 ， 通 过 对 比 可 以 发 现 这 类 样式 设计 的 优势 和 便捷 之 处 。 
第 2 步 ， 新 建 内 部 样式 ， 定 义 基本 的 按钮 类 样式 ， 代 码 如 下 。 


ul { list-style: none: } 
a.button { 
display: block: float: left: 
position: relative; 
height: 25px:; width: 120px:; 
margin: 0 10px 18px 0; 
text-decoration: none; 
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif: 
font-weight: bold; line-height: 25px; text-align: center; 
} 


第 3 步 ， 为 该 类 样式 增加 行为 样式 ， 让 按钮 实现 动态 效果 。 这 里 主要 使 用 了 :hover 伪 类 选择 器 。 
例如 ， 为 灰色 系 按钮 设计 鼠标 经 过 时 的 动态 样式 效果 ， 主 要 包括 字体 颜色 和 背景 色 的 变化 ， 以 及 边 
框 线 的 变换 ， 以 模拟 立体 效果 。 


.gray,.gray:hover { 
color: #555; 
border-bottom: 4px solid #b2b1b]1: 
background: #eee: 


} 
.gray:hover { background: #e2e2e2; } 


第 4 步 ， 定 义 双 边框 样式 。 通 过 预览 会 发 现 现 在 的 按钮 边框 显得 比较 单薄 ， 需 要 为 按钮 定义 
粗 边 框 的 底部 效果 ， 同 时 还 需要 增加 一 点 行 间 距 ， 因 此 这 里 使 用 了 :before 和 :after 伪 类 样式 ， 代 码 
如 下 。 


a.button:before, a.button:after { 
content: ”: 
position: absolute; 
left: -1px: bottom: -1px: 
height: 25px; width: 120px:; 


。38。 


第 2 章 使 用 CSS3 过 择 器 一 有 ] 





第 5 步 ， 为 了 彰显 按钮 的 金属 特质 ， 不 妨 借 助 CSS3 的 特效 定义 圆 角 效果 ， 代 码 如 下 。 | 


第 6 步 ， 为 边框 定义 阴影 效果 ， 代 码 如 下 。 





第 7 步 ， 定 义 鼠 标 经 过 和 访问 过 按钮 伪 类 状态 类 样式 ， 设 计 渐 变 背景 色 特 效 ， 代 码 如 下 。 





e。 .39 。 
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第 8 步 ， 利 用 :active 伪 类 选择 器 定义 对 象 激 活 下 的 样式 效果 。 


: /# 激活 状态 样式 */ 
] a.button:active { 
border: none: 
bottom: -4px:; 





margin-bottom: 22px; 

box-shadow: lpx lpx 0 #1ff, inset 0 1px lpx rgba(0, 0, 0, 0.3); 
} 
a.button:active:before, 
a.button:active:after { 

border: none: 


box-shadow: none: 


} 


2.4.2 ”结构 伪 类 


结构 伪 类 是 根据 文档 结构 的 相互 天 系 来 匹配 特定 的 元 素 , 从 而 减少 文档 元 素 的 class 属性 和 id 属 
性 的 无 序 设 置 ， 使 得 文档 更 加 简洁 。 
结构 伪 类 形式 多 样 ， 但 用 法 固定 ， 以 便 设 计 各 种 特殊 样式 效果 。 结 构 伪 类 主要 包括 以 下 几 种 。 
:first-child: 第 一 个 子 元 素 。 
:last-child: 最 后 一 个 子 元 素 。 
:nth-chlld0: 按 正 序 匹 配 特 定子 元 素 。 
:nth-last-child0: 按 倒序 匹配 特定 子 元 素 。 
:nth-of-type0: 在 同类 型 中 匹配 特定 子 元 素 。 
:nth-last-of-typeO0: 按 倒序 在 同类 型 中 匹配 特定 子 元 素 。 
:first-of-type: 第 一 个 同类 型 子 元 素 。 
:last-of-type: 最 后 一 个 同类 型 子 元 素 。 
:only-child: 唯一 子 元 素 。 
:only-of-type: 同类 型 的 唯一 子 元 素 。 
加”:empty: 空 元 素 。 
【示例 1】 本 示例 是 设计 一 个 排行 榜 栏 目 列表 样式 ， 效 果 如 图 2.24 所 示 。 在 列表 框 中 为 每 个 列表 
项 定义 相同 的 背景 图 像 。 





和 的 时 多 的 多 的 多 的 的 
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图 2.24 设计 排行 榜 栏 目 样式 
设计 的 列表 结构 如 下 。 


<div 1d="wrap"> 
<ul 1d="container"> 
<]i><a hre 伍 "#"> 送 君 干 里 终 须 一 别 </a></li> 
<li><a hre 伍 "#"> 旅 行 的 意义 </a></li> 
<]i><a hre 仁 "#"> 南 师 虽 去 ， 精 神 永存 </a></li> 
<]i><a hre 伟 "#"> 榴 血 精 米粒 </a></> 
<]i><a hre 伍 "#"> 阿 尔 及 利 亚 天 命 之 年 </a></li> 
<li><a hre 伍 "#"> 白 菜 鸡肉 粉丝 包 </a></li> 
<li><a hre 仁 "#">《 展 望 塔 上 的 杀人 》</a></li> 
<]li><a hre 伍 "#"> 我 们 ， 只 会 在 路 上 相遇 </a></li> 
</ul> 
</div> 


设计 的 列表 样式 如 下 。 


旋 定 位 栏目 位 置 */ 

#wrap { width: 260px; height: 276px: background: url(1mages/bg1.jpg) no-Tepeat:} 

刻 初 始 化 列表 结构 样式 */ 

#wrap ul { list-style-type: none; margin: 0; padding: 0; font-size: 12px:; color: #777:; } 

#wrap li { background: url(1mages/top10-bullet.png) no-repeat 2px 10px;:; padding: 1px Opx Opx 28px; line-height: 
30px; } 

#wrap lia { text-decoration: none: color: #777:; } 

#wrap li a:hover { color: #F63; } 
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下 面 结合 这 个 栏目 示例 ， 有 具体 分 析 结 构 伪 类 选择 器 的 用 法 。 
1. :first-child 
和 H、 【示例 2】 如 果 设 计 第 一 个 列表 项 前 的 图 标 为 1， 且 字体 加 粗 显 示 ， 则 使 用 :first-child 匹配 ， 代 码 


mT 


#wrap li:first-child { 
background-position:2px 10px; 
font-welght:bold: 

} 


2. :last-child 
【示例 3】 如 果 单 独 给 最 后 一 个 列表 项 定义 样式 ， 就 可 以 使 用 :last-child 来 匹配 。 
#wrap li:last-child {background-position:2px -277px;} 


显示 效果 如 图 2.25 所 示 。 
3. :nth-child() 
:nth-childO) 可 以 选择 一 个 或 多 个 特定 的 子 元 素 。 访 函数 有 多 种 用 法 。 


:nth-child(length);/* 参 数 是 具体 数字 */ 
:nth-child(n):/* 参 数 是 n，n 从 0 开始 计算 */ 
:nth-child(n*length)/*n 的 倍数 选择 ，n 从 0 开始 算 */ 
:nth-child(n+length);/* 选 择 大 于 或 等 于 length 的 元 素 */ 
:nth-child(-n+length)/* 选 择 小 于 或 等 于 length 的 元 素 */ 
:nth-childCn*length+l):/* 表 示 隔 几 选 一 #/ 


在 nth-child0 函 数 中 ， 参 数 length 为 一 个 整数 ，n 表示 一 个 从 0 开始 的 自然 数 。 

:nth-child0 可 以 定义 值 ， 值 可 以 是 整数 ， 也 可 以 是 表达 式 ， 用 来 选择 特定 的 子 元 素 。 

【示例 4】 下 面 6 个 样式 分 别 匹配 列表 中 第 2 一 7 个 列表 项 ， 并 分 别 定义 它们 的 背景 图 像 Y 轴 坐 
标 位 置 ， 显 示 效 果 如 图 2.26 所 示 。 


#wrap li:nth-child(2) { background-position: 2px -31px; } 
#wrap li:nth-child(3) { background-position: 2px -72px; } 
#wrap li:nth-child(4) { background-position: 2px -113px; } 
#wrap li:nth-child($) { background-position: 2px -154px; } 
#wrap li:nth-child(6) { background-position: 2px -195px; } 
#wrap li:nth-child(7) { background-position: 2px -236px; } 


。42 。 


第 2 章 使 用 CSS3 这 择 器 一 | ] 


x 
€ 
双 周 热门 推荐 

四 送 君 千里 终 须 一 别 
ee 

四 南 师 昌 去 , 精神 永存 

格 涟 粳米 术 


< 一 一 中 -| 谷 http://localho... ~ 虽 必 
双 周 热门 推荐 

四 送 君 千里 终 须 一 别 

四 旅行 的 意义 

加 南 师 虽 去 ， 精神 永存 





加 榴莲 本 米 柑 
国 阿尔 及 利 IE 天 命 之 年 
四 白 荣 鸡 内 粉丝 包 


国 阿 尔 R 利 [天 钙 Z 年 。 
3 白菜 鸡肉 粉丝 包 


GE 《展望 塔 上 的 杀人 六 
我 们 ， 只 会 在 路 上 相 喝 


GE 《展望 塔 上 的 杀人 仿 


四 我 们 , 只 会 在 路 上 相 浊 





图 2.25 设计 最 后 一 个 列表 项 样式 图 2.26 第 2 一 7 个 列表 项 样式 
注意 ， 这 种 函数 参数 用 法 不 能 引用 负 值 ， 也 就 是 说 ，linth-child(-3) 是 不 正确 的 使 用 方法 。 
MM :nth-child(n) 
在 :nth-child(n) 中 , n 是 一 个 简单 的 表达 式 ， 其 取 值 从 0 开始 计算 ， 到 什么 时 候 结 束 不 确定 ， 需 结 
合 文 档 结构 而 定 ， 如 果 在 实际 应 用 中 直接 这 样 使 用 ， 将 会 选中 所 有 子 元 素 。 
【示例 5】 在 上 面 示例 中 ， 如 果 在 1i 中 使 用 :nth-child(n)， 那 么 将 选中 所 有 的 工 元 素 。 


#wrap li:nth-child(n) {text-decoration:underline;} 
上 述 样 式 类 似 于 : 
#wrap li {text-decoration:underline;} 


其 实 ，nth-child(n) 是 这 样 计算 的 : 

n=0 表示 没有 选择 元 素 ; 

n=1 表示 选择 第 1 个 1i; 

n=2 表示 选择 第 2 个 1i。 

依 此 类 推 ， 这 样 就 选中 了 所 有 的 1i。 

MM :nth-child(2n) 

【示例 6】:nth-child(2n) 是 :nth-child(n) 的 一 种 变 体 ， 使 用 它 可 以 选择 n 的 2 倍 ， 当 然 其 中 2 可 以 
换 成 需要 的 数字 ， 分 别 表示 不 同 的 倍数 。 


#wrap li:nth-child(2n) {font-weight:bold;} 
等 价 于 : 
#wrap li:nth-child(even) {font-weight:bold:} 


预览 效果 如 图 2.27 所 示 。 
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当 n=0， 则 2n=0， 表 示 没 有 选中 任何 元 素 ; 

当 n=1， 则 2n=2， 表 示 选 择 了 第 2 个 1i; 

当 n=2， 则 2n 一 4， 表示 选择 了 第 4 个 1i。 

依 此 类 推 。 

如 果 是 2n0， 这 样 与 使 用 even 命名 class 定义 样式 所 起 到 的 效果 是 一 样 的 。 
MM :nth-child(2n-1) 

【示例 7】:nth-child(2n-1) 选 择 器 是 在 :nth-child(2n) 基 础 上 演变 来 的 ， 既然 :nth-child(2n) 表 示 选 择偶 
那么 在 它 的 基础 上 减 去 1 就 变 成 奇数 选择 。 


#wrap li:nth-child(2n-1) {font-weight:bold;} 
等 价 于 : 
#wrap li:nth-child(odd) {font-weight:bold;} 


来 看 看 其 实现 过 程 : 

当 n=0， 则 2n-1=-1， 表 示 没 有 选中 任何 元 素 ; 

当 n=1， 则 2n-1=1， 表 示 选 择 第 1 个 1i; 

当 n=2， 则 2n-1=3， 表 示 选 择 第 2 个 1i。 

依 此 类 推 。 

其 实 这 种 奇数 效果 ， 还 可 以 使 用 :nth-child(2n+1) 和 :nth-child(odd) 来 实现 。 
MM :nth-child(n+5) 

【示例 8】:nth-child(n+5) 选 择 占 是 从 第 5 个 子 元 素 开 始 选择 。 


li:nth-child(n+5) {font-weight:bold;:} 


其 实现 过 程 如 下 : 

当 n=0， 则 n+5=5， 表 示 选 中 第 5 个 li; 

当 n=1， 则 n+5=6， 表 示 选 择 第 6 个 li。 

依 此 类 推 。 

读者 可 以 使 用 这 种 方法 选择 需要 开始 选择 的 元 素 位 置 ， 也 就 是 说 换 了 数字 ， 起 始 位置 就 变 了 。 
MM :nth-child(-n+5) 

【示例 9】:nth-child(-n+5) 选 择 器 刚好 和 :nth-child(n+5) 选 择 器 相反 , 它 是 选择 第 5 个 前 面 的 子 元 素 。 


li:nth-child(-n+5) {font-weight:bold;} 


其 实现 过 程 如 下 : 

当 n=0， 则 -n+5=5， 表 示 选 择 了 第 5 个 1i; 
当 n=1， 则 -n+S$=4， 表 示 选 择 了 第 4 个 1i; 
当 n=2， 则 -n+S=3 ， 表 示 选 择 了 第 3 个 li; 
当 n=3， 则 -n+5=2， 表 示 选 择 了 第 2 个 1i; 
当 n=4， 则 -n+5=1， 表 示 选 择 了 第 1 个 1i; 
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当 n=5， 则 -n+5=0， 表 示 没 有 选择 任何 元 素 。 

MM :nth-child(Sn+1) 
:nth-child(Sn+1l1) 选 择 堪 是 实现 隔 几 选 一 的 效果 。 
【示例 10】 如 果 是 隔 三 选 一 ， 则 定义 的 样式 如 下 。 





li:nth-child(3n+1) {tont-welght:bold:} 
其 实现 过 程 如 下 : 

当 n=0， 则 3n+1=1， 表 示 选 择 了 第 1 个 1i; 
当 n=1， 则 3n+1=4， 表 示 选 择 了 第 4 个 1i; 
当 n=2， 则 3n+1=7， 表 示 选 择 了 第 7 个 1i。 
设计 效果 如 图 2.28 所 示 。 
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图 2.27 设计 偶数 行列 表 项 样式 图 2.28 设计 隔 三 选 一 行列 表 项 样式 
4. :nth-last-child() 
【示例 11】:nth-last-child0 选 择 器 与 :nth-childO0 相 似 ， 但 作用 与 :nth-child0 不 一 样 ，:nth-last-child0) 
是 从 最 后 一 个 元 素 开始 计算 ， 来 选择 特定 元 素 。 


li:nth-last-child(4) {font-weight:bold;} 


上 面 代 码 表 示 选 择 倒数 第 4 个 列表 项 。 

其 中 ，:nth-last-child(1) 和 :last-child 所 起 作用 是 一 样 的 ， 都 表示 选择 最 后 一 个 元 素 。 

另外 ，:nth-last-child0 与 :nth-childO 用 法 相同 ， 可 以 使 用 表达 式 来 选择 特定 元 素 ， 下 面 来 看 几 个 特 
殊 的 表达 式 所 起 的 作用 。 

:nth-last-child(2n) 表 示 从 元 素 后 面 计算 , 选择 的 是 偶数 个 数 ， 从 而 反 过 来 说 就 是 选择 元 素 的 奇数 ， 
与 前 面 的 :nth-child(2n+1)、:nth-child(2n-1)、:nth-child(odd) 所 起 的 作用 是 一 样 的 。 例 如 : 
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li:nth-last-child(2n) {tont-welght:bold:} 
li:nth-last-child(even) {font-weight:bold:} 
等 价 于 : 


li:nth-child(2n+1) {font-weight:bold:;} 
li:nth-child(2n-1) {font-weight:bold:} 
li:nth-child(odd) {font-weight:bold;} 


:nth-last-child(2n-1) 选 择 占 刚好 与 上 面 的 相反 ， 从 后 面 计算 选择 的 是 奇数 ， 而 从 前 和 面 计算 选择 的 
就 是 偶数 位 了 。 例 如 : 

li:nth-last-child(2n+1) {tont-welght:bold:} 

li:nth-last-child(2n-1) {font-weight:bold:} 

li:nth-last-child(odd) {font-weight:bold;} 

等 价 于 : 

li:nth-child(2n) {font-weight:bold:} 

li:nth-child(even) {font-weight:bold;:} 

总 之 ，:nth-lastrchild0 和 nth-child0 的 使 用 方法 是 一 样 的 ， 区 别 是 :nth-childO 从 元 素 的 第 一 个 开始 
计算 ， 而 :nth-last-child0 是 从 元 系 的 最 后 一 个 开始 计算 ， 它 们 的 计算 方法 都 是 一 样 的 。 

3. :nth-of-type() 

:nth-of-typeO 类 似 于 :nth-child0， 不 同 的 是 ，:nth-of-typeO 只 计算 选择 器 中 指定 的 那个 元 素 。 这 个 
选择 器 在 定位 元 素 中 包含 很 多 不 同类 型 的 子 元 素 时 是 很 有 用 处 的 。 

【示例 12】 在 div#wrap 中 包含 很 多 p、li、img 等 元 素 ， 但 现在 只 需要 选择 p 元 素 ， 并 让 它 每 隔 
一 个 p 元素 就 有 不 同 的 样式 ， 可 以 简单 写成 : 

div#wrap p:nth-of-type(even) {tont-welght:bold:} 

其 实 ， 这 种 用 法 与 :nth-child0 是 一 样 的 ， 也 可 以 使 用 :nth-child0 的 表达 式 来 实现 ， 唯 一 不 同 的 
是 ，:nth-of-type0 指 定 了 元 素 的 类 型 。 

6. :nth-last-of-type() 

:nth-last-of-type0 与 :nth-last-child0 用 法 相同 ， 但 它 指定 了 子 元 素 的 类 型 ， 除 此 之 外 ， 语 法 形式 和 
用 法 基本 相同 。 

7. :first-of-type() 和 :last-of-type() 

:first-of-typeO0 和 :last-of-typeO 这 两 个 选择 器 类 似 于 :first-child0 和 :last-child0， 不 同 之 处 就 是 它们 
指定 了 元 素 的 类 型 。 


。46 。 


第 2 章 使 用 CSS3 和 这样 器 





8. :only-child 和 :only-of-type 


:only-child 表示 的 是 一 个 元 素 是 它 的 父 元 素 的 唯一 一 个 子 元素 。 人 7 
【示例 13】 在 文档 中 设计 如 下 HTML 结构 。 : 


<div class="post"> 
<p> 第 一 段 文 本 内 容 </p> 
<p> 第 二 段 文本 内 容 </p> 


</div> 





<div class="post"> 
<p> 第 三 段 文本 内 容 </p> 


</div> 


如 果 需 要 在 divpost 只 有 一 个 p 元 素 的 时 候 ， 改 变 这 个 p 的 样式 ， 那 么 就 可 以 使 用 :only-child 选 
择 堪 来 实现 。 


.post p {font-weight:bold;} 
.post p:only-child {background: red;} 


当 divpost 只 有 一 个 子 元 素 p 时 ， 那 么 它 的 背景 色 将 会 显示 为 红色 。 
:only-of-type 表示 一 个 元 素 包含 很 多 个 子 元 素 ， 而 其 中 只 有 一 个 子 元 素 是 唯一 的 ， 那 么 使 用 这 种 
选择 方法 就 可 以 选择 这 个 唯一 的 子 元 素 。 例 如 : 
<div class="post"> 
<div> 子 块 一 </div> 
<p> 文 本 段 </p> 
<div> 子 块 二 </div> 


</div> 
如 果 只 想 选 择 上 面 结构 块 中 的 p 元 素 ， 就 可 以 这 样 写 : 
.post p:only-of-type {background-color:red;} 


9. :empty 
:empty 是 用 来 选择 没有 任何 内 容 的 元 素 ， 这 里 没有 内 容 指 的 是 一 点 内 容 都 没有 ， 包 括 空 格 。 
【示例 14】 这 里 有 3 个 段落 ， 其 中 一 个 段落 什么 都 没有 ， 完 全 是 空 的 。 
<div class="post"> 
<p> 第 一 段 文本 内 容 </p> 
<p> 第 二 段 文 本 内 容 </p> 
</div> 


<div class="post"> 
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<p></p> 
</div> 
如 果 想 设计 这 个 p 不 显示 ， 那 就 可 这 样 来 写 : 


.post p:empty {display: none:} 


2.4.3 否定 伪 类 


:not0 表 示人 否定 选择 器 ， 即 排除 或 者 过 滤 掉 特定 元 素 。 

【示例 】 本 示例 是 设计 一 个 分 层 表 格 样式 ， 主 要 借助 否定 伪 类 选择 器 和 结构 伪 类 选择 器 ， 配 合 
CSS 背景 图 像 技 术 设 计 树 形 结构 标志 ; 借助 伪 类 选择 器 设计 鼠标 经 过 时 的 动态 背景 效果 ; 利用 CSS 
边框 和 背景 色 设计 标题 行 的 立体 显示 效果 。 效 果 如 图 2.29 所 示 。 








选择 某 个 元 素 的 第 一 个 子 元 素 。 
选择 某 个 元 素 的 最 后 一 个 子 元 素 。 
选择 一 个 上 级 元 案 下 的 第 一 个 同类 子 元 素 。 


选择 的 元 素 星 它 的 父 元 素 的 唯一 一 个 子 元 素 。 
选择 一 个 元 素 是 它 的 上 级 元 素 的 难 一 一 个 相同 类 型 的 子 元 素 。 
选择 的 元 素 里 面 没有 任何 内 容 。 


选择 某 个 元 素 的 一 个 或 多 个 特定 的 子 元 素 。 

选择 某 个 元 素 的 一 个 或 多 个 特定 的 子 元 素 ， 从 这 个 元 素 的 最 后 一 个 子 元 豆 开 始 特 。 
选择 指定 的 元 素 。 

选择 指定 的 元 素 ， 从 元 素 的 最 后 一 个 开始 计算 。 














图 2.29 设计 表格 样式 


【操作 步骤 】 
第 1 步 ， 利 用 表格 结构 构建 一 个 数据 表 。 


<table> 
<thead> 
1 户 = 
<th> 编 号 </th> 
<th> 伪 类 表达 式 </th> 
<th> 说 明 </th> 
</tr> 
</thead> 
<tbody> 
<tr><td colspan="3"> 简 单 的 结构 伪 类 </td></tr> 
<tr><th>1</th><td>:first-child</td><td> 选 择 某 个 元 素 的 第 一 个 子 元 素 。</td></tr> 
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<tr><th>2</th><td>:last-child</td><td> 选 择 某 个 元 素 的 最 后 一 个 子 元 素 。</td></tr> 
<tr><th>3</ 了 h><td>:first-of-type</td><td> 选 择 一 个 上 级 元 素 下 的 第 一 个 同类 子 元 素 。</td></tr> | 
<tr><th>4</th><td>:last-of-type</td><td> 选 择 一 个 上 级 元 素 下 的 最 后 一 个 同类 子 元 素 。</td></tr> ] 屿 # 
<tr><th>5</th><td>:only-child</td><td> 选 择 的 元 素 是 它 的 父 元 素 的 唯一 一 个 子 元 素 。</td></tr> 
<tr><th>6</th><td>:only-of-type</td><td> 选 择 一 个 元 素 是 它 的 上 级 元 素 的 唯一 一 个 相同 类 型 的 子 ET 
元 素 。</td></tr> 
<tr><th class="end">7</th><td>:empty</td><td> 选 择 的 元 素 里 面 没 有 任何 内 容 。</td></tr> 
<tr><td colspan="3"> 结 构 伪 类 函数 </td></tr> 
<tr><th>8</th><td>:nth-child()</td><td> 选 择 某 个 元 素 的 一 个 或 多 个 特定 的 子 元 素 。</td></tr> 
<tr><th>9</th><td>:nth-last-child(0</td><td> 选 择 某 个 元 素 的 一 个 或 多 个 特定 的 子 元 素 ， 从 这 个 元 
素 的 最 后 一 个 子 元 素 开始 算 。</td></tr> 
<tr><th>10</th><td>:nth-of-typeO</td><td> 选 择 指 定 的 元 素 。</td></tr> 


<tr><th class="end">11</th><td>:nth-last-of-typeO</td><td> 选 择 指定 的 元 素 ， 从 元 素 的 最 后 一 个 开 
始 计算 。</td></tr> 


</tbody> 
</table> 





第 2 步 ， 使 用 <style> 标 签 在 当前 文档 中 内 建 一 个 样式 表 ， 并 初始 化 表格 样式 。 


table { border-collapse: collapse; font-size: 75%; line-height: 1.4; border: solid 2px #cecce; width: 100%; } 
th, td { padding: .3em .Sem:; cursor: pointer; } 
th { font-weight: normal; text-align: left: padding-left: 1Spx: } 


第 3 步 ， 使 用 结构 伪 类 选择 器 匹配 合并 单元 格 所 在 的 行 ， 定 义 合 并 单元 格 所 在 行 加 粗 显 示 。 


td:only-of-type { 
font-weight:bold: 
color:#444;} 


第 4 步 ， 使 用 否定 伪 类 选择 占 选 择 主体 区 域 非 最 后 一 个 也 元素 。 以 背景 方式 在 行 前 定义 结构 路 
径 线 。 


tbody th:not(.end) { 
background: url(images/dots.gif) 1 Spx $56% no-Tepeat: 
padding-left: 26px:} 
第 5 步 ， 使 用 类 选择 器 选择 主体 区 域 非 最 后 一 个 也 元素。 以 背景 方式 在 行 前 定义 结构 封闭 路 径 线 。 


tbody th.end { 
background: url(1mages/dots2.g1f) 1Spx 56% no-Tepeat': 
padding-left: 26px:} 
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第 6 步 ， 使 用 thead 元 泰 把 表 头 标题 独立 出 来 ， 方便 CSS 控制 ， 避 免 定 义 过 多 的 class 属性 。 
了 h 元 系 有 两 种 显示 形式 ， 一 种 用 来 定义 列 标题 ， 另 一 种 用 来 定义 行 标题 。 下 面 是 定义 表格 标题 列 


样式 。 
ee 


background: #c6ceda; 
border-color: #fff #fff #888 #1fff: 
border-style: solld: 
border-width: 1px lpx 2px lpx; 
padding-left: .Sem;} 


第 7 步 ， 设 计 隔 行 换 色 的 背景 效果 ， 这 里 主要 应 用 了 :nth-child(2n) 选 择 器 ， 同 时 使 用 :hover 动态 
伪 类 定义 鼠标 经 过 时 的 行 背 景色 动画 变化 ， 以 提示 鼠标 当前 经 过 行 效果 。 
tbody tr:nth-child(2n) {background-color: #fef:} 
tbody tr:hover{ background: #fbf: } 
2.4.4 ”状态 盆 类 
CSS3 新 增 3 个 UI 状态 伪 类 选择 器 。 简 单 说 明 如 下 。 
1. :enabled 


:enabled 伪 类 表示 匹配 指定 范围 内 所 有 可 用 UI 元 素 。 在 网 页 中 ，UI 元 素 一 般 是 指 包 含 在 form 
元 素 内 的 表单 元 素 。 例 如 ， 在 下 面 表单 结构 中 ，input:enabled 选择 器 将 匹配 文本 框 ， 但 不 匹配 该 表单 
中 的 按钮 。 





<form> 
<input type="text" /> disabled 
<Input type="button"/> 


</form> 

2. :disabled 

:disabled 伪 类 表示 匹配 指定 范围 内 所 有 不 可 用 UI 元 素 。 例 如 , 在 下 面 表单 结构 中 ,input:disabled 
选择 器 将 匹配 按钮 ， 但 不 匹配 该 表单 中 的 文本 框 。 


<form> 

<input type="text" /> 

<input type="button" disabled="disabled" /> 
</form> 


3. :checked 
:checked 伪 类 表示 匹配 指定 范围 内 所 有 可 用 UI 元 素 。 例 如 ， 在 下 面 表单 结构 中 ，input:checked 


。 DO 。 
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选择 器 将 匹配 片段 中 的 单 选 按钮 ， 但 不 匹配 该 表单 中 的 复 选 杠 。 


<form> 
<input type="checkbox" /> 
<input type="rad1io" checked="checked" /> 


</form> 





【示例 】 本 示例 设计 一 个 简单 的 登录 表单 ,效果 如 图 2.30 所 示 。 在 实际 应 用 中 , 当 用 户 登 录 完 毕 ， 
不 妨 通 过 脚本 把 文本 框 设 置 为 不 可 用 (disabled="disabled") 状态 ， 这 时 可 以 通过 :disabled 选择 器 让 
文本 框 显示 为 灰色 ， 以 告诉 用 户 该 文本 框 不 可 用 了 ， 这 样 就 不 用 设计 “不 可 用 ”样式 类 ， 并 把 该 类 
添加 到 HTML 结构 中 。 


< -人 加 http://localhost/imn Pv 0 加 localhost 


用 户 名 
& zhangsan 











图 2.30 设计 登录 表单 样式 


【操作 步骤 】 
第 1 步 ， 新 建 一 个 文档 ， 在 文档 中 构建 一 个 简单 的 登录 表单 结构 。 


<form action="#"> 
<]label for="usermmame"> 用 户 名 </label> 
<input type="text" name="username" 1d="username" /> 
<input type="text" name="username1" disabled="disabled" value=" 不 可 用 " /> 
<]label for="password"> 密 码 </label> 
<input type="password" name="password" 1d="password" /> 
<input type="password" name="password1" disabled="disabled" value=" 不 可 用 " /> 
<input type="submit" value=" 提 交 " /> 


</form> 


在 这 个 表单 结构 中 ， 使 用 HTML 的 disabled 属性 分 别 定义 两 个 不 可 用 的 文本 框 对 象 。 
第 2 步 ， 内 建 一 个 内 部 样式 表 ， 使 用 属性 选择 器 定义 文本 框 和 密码 域 的 基本 样式 。 


input[type="text"], input[type="password"| { 
border: 1px solid #0f0:; 


。 D1。 
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width: 160px: 
height:22px: 
padding-left:20px: 
margin:6px 0: 
line-height:20px;} 


第 3 步 ， 利 用 属性 选择 器 分 别 为 文本 框 和 密码 域 定 义 内 通 标 识 图 标 。 


input[type="text"|] { background:url(1mages/name.gif) no-repeat 2px 2px; } 
input[type="password"| { background:url(1mages/password.gif) no-repeat 2px 2px; } 


第 4 步 ， 使 用 状态 伪 类 选择 器 定义 不 可 用 表单 对 象 显 示 为 灰色 ， 以 提示 用 户 该 表单 对 象 不 可 用 。 


input[type="text"]:disabled { 
background:#ddd url(1mages/namel].g1f) no-repeat 2px 2px; 
border: 1px solid #bbb;} 

input[type="password"|:disabled { 
background:#ddd url(1mages/password] .gif) no-repeat 2px 2px; 
border: 1px solid #bbb:} 


2.4.5 目标 伪 类 





目标 伪 类 选择 器 类 型 形式 如 E:target， 它 表示 选择 匹配 E 的 所 有 元 素 ， 且 匹配 元 妹 被 相关 URL 


指向 。 该 选择 器 是 动态 选择 器 ， 只 有 当 存 在 URL 指向 该 匹配 元 素 时 ， 样 式 效果 才能 够 有 效 。 


【示例 】 本 示例 设计 了 当 单 击 页 面 中 的 锚 点 链接 ， 跳 转 到 指定 标题 位 置 时 ， 该 标题 会 目 动 高 亮 显 


示 ， 以 提醒 用 户 当 前 跳 转 的 位 置 ， 效 果 如 图 2.31 所 示 。 


<style type="text/css"> 

上 庆 设计 导航 条 固定 在 窗口 右上 角 位 置 显示 */ 
hl{ position:fixed; right: 12px; top:24px;} 

上 # 让 锚 点 链接 堆 晤 显示 */ 

hl a{ display:block:} 

具 设计 锚 点 链接 的 目标 高 之 显示 */ 

h2:target { background:hsla(93,96%,62%,1.00); } 
</style> 


<hl><a hre 舍 "元 1"> 图 片 1</a><a hre 舍 "元 2"> 图 片 2</a><a hre 伍 "#p3"> 图 片 3</a><a hre 舍 "元 4"> 图 片 


4</a></h1> 


<h2 id="p1"> 图 片 1</h2> 
<p><lmg src="i1mages/1.jpg" /></p> 
<h2 id="p2"> 图 片 2</h2> 


。 DI。 
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<p><img src="images/2.Jpg" /></p> 


<h2 id="p3" 必 图片 3</h2> 

<p><img src="1mages/3.jpg" /></p> | 
<h2 id="p4"> 图 片 4</h2> 
<p><1img src="i1mages/4.jpg" /></p> 








图 2.31 目标 伪 类 样式 应 用 效果 


25 在线 练习 


读者 可 以 扫 码 练习 。 
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使 用 CSS 美化 网 页 文本 


网 页 的 一 个 主要 作用 是 传 通 信息 ， 文 本 作为 主要 的 信息 载体 ， 由 以 前 的 纯 文 本 演变 至 
丰富 多 彩 的 形式 ， 主 要 归功 于 CSS 样式 。CSS 样式 对 文本 的 修饰 不 仅仅 是 字体 类 型 、 大 小 、 
粗细 、 倾 斜 等 基本 样式 ， 还 包括 文本 颜色 、 行 高 、 下 划 线 等 各 个 方面 的 修饰 。 本 章 从 基础 
的 文字 设置 出 发 ， 详 细 讲 解 CSS 设置 各 种 文字 效果 的 方法 ， 然 后 进一步 讲解 段落 排版 的 相 


【 学 习 要 点 】 

MD 定义 字体 样式 。 

WD 定义 文本 样式 。 

| 能够 灵活 设计 页 面 文本 样式 。 


第 已 章 使 用 CSS 美 化 网 页 文本 





3.1 字体 基本 样式 





网 页 字体 样式 包括 字体 类 型 、 大 小 、 颜 色 等 基本 效果 ， 男 外 还 包括 一 些 特殊 的 样式 ， 如 字体 粗 


细 、 下 划 线 、 和 斜体 、 大 小 写 样 式 等 。 
3.1.1 定义 字体 类 型 


CSS 使 用 font-family 属性 来 定义 字体 类 型 ， 用 法 如 下 。 


font-family : name 
font-family :necursive | fantasy | monospace | serif | sans-serif 





name 表示 字体 名 称 ， 可 指定 多 种 字体 ， 多 个 字体 将 按 优 先 顺序 排列 ， 以 召 号 阳 开 。 如 果 字 体 名 
称 包含 空格 ， 则 应 使 用 引号 括 起 。 第 2 种 声明 方式 使 用 所 列 出 的 字体 序列 名 称 ， 如 果 使 用 fantasy 序 


列 ， 将 提供 默认 字体 序列 。 
【示例 1】 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 一 行 段落 文本 。 


<p> 定 义 字 体 类 型 </p> 


在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 用 


来 定义 网 页 字体 的 类 型 。 


body {/* 页 面 基 本 属性 */ 
font-family:Arial, Helvetica, sans-serif = /* 字体 类 型 */ 


} 
p {l* 段落 样式 */ 

font:24px "隶书 ": /# 24 像素 大 小 的 隶书 字体 */ 
} 


font 是 一 个 复合 属性 ， 能 够 设置 多 种 字体 属性 ， 如 字体 大 小 、 字 体 类 型 、 行 高 、 艺 术 字 体 等 。 用 


法 如 下 。 


font : font-style || font-variant || font-weight || font-slze || line-height || font-family 
font : caption | Icon | menu | message-box | small-caption | status-bar 


属性 值 之 间 以 空格 分 隔 。font 属性 至 少 应 设置 字体 大 小 和 字体 类 型 , 且 必 须 放 在 后 面 , 否则 无 效 。 
前 和 面 可 以 自由 定义 字体 样式 、 字 体 粗 细 、 大 小 写 和 行 高， 详细 用 法 将 在 后 和 面 小 节 中 分 别 介 绍 。 


窑 提示 : 中 文 网 页 字体 多 定义 为 宋体 类 型 ， 对 于 标题 或 特殊 提示 信息 ， 如 果 需 要 特殊 字体 ， 则 建 


议 采 用 图 像 形 式 来 间接 实现 。 


。55 。 
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【示例 2】 以 列表 的 形式 设置 多 种 字体 类 型 。 在 上 面 示例 基础 上 ， 为 段落 文本 设置 3 种 字体 类 型 ， 
其 中 第 一 个 为 具体 的 字体 类 型 ， 而 后 面 两 个 为 通用 字体 类 型 。 


p {font-family:"Times New Roman", Times, serif} 


注意 ， 字 体 列表 以 逗号 进行 分 隔 ， 浏 览 器 会 根据 这 个 字体 列表 来 检索 用 户 系统 中 的 字库 ， 按 照 
从 左 到 右 的 顺序 进行 选用 。 如 果 没 有 找到 列表 中 对 应 的 字体 ， 则 选用 默认 字体 进行 显示 。 


3.1.2 ”定义 字体 大 小 
CSS 使 用 font-size 属性 来 定义 字体 大 小 ， 用 法 如 下 。 


font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length 


其 中 ，xx-small (最 小 )、x-small〈( 较 小 )、small (小 )、medium (正常 )、large( 大 )、x-largee〔( 较 
”大 )、xx-large (最大) 表示 绝对 字体 尺寸 ， 这 些 特殊 值 将 根据 对 象 字 体 进行 调整 ，larger〈 增 大 ) 和 
z smaller (减少) 这 对 特殊 值 能 够 根据 父 对 象 中 字体 尺寸 进行 相对 增 大 或 者 缩小 处 理 ， 使 用 成 比例 的 
z em 单位 进行 计算 ; length 可 以 是 百分数 , 或 者 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 , 但 不 可 为 负 值 。 
”其 百分比 取 值 是 基于 父 对 象 中 字体 的 尺寸 来 计算 ， 与 em 单位 计算 相同 。 


窑 提示 : CSS 提供 了 很 多 单位 ， 它 们 可 以 被 归 为 两 大 类 : 绝对 单位 和 相对 单位 。 


绝对 单位 所 定义 的 字体 大 小 是 固定 的 ， 大 小 显示 效果 不 会 受 外 界 因素 影响 。 例 如 ，in (inch， 英 

: 寸 )、cm (centimeter, 厘米 )、mm (millimeter， 野 米 )、pt (point， 印 刷 的 点 数 )、pc (pica，lpc=12pt)。 

”此 外 ，xx-small、x-small、small、medium、large、x-large、xx-large 这 些 关键 字 也 是 绝对 单位 。 

相对 单位 所 定义 的 字体 大 小 一 般 是 不 固定 的 ， 会 根据 外 界 环境 而 不 断 发 生变 化 ， 介 绍 如 下 。 

名 ”px (pixel， 像 素 ): 根据 屏幕 像素 点 的 尺寸 变化 而 变化 。 因 此 ， 不 同 分 辨 率 的 屏幕 所 显示 的 
像素 字体 大 小 也 是 不 同 的 ， 屏 幕 分 辨 率 越 大 ， 相 同 像素 字体 就 显得 越 小 。 

四 em: 相对 于 父辈 字体 的 大 小 来 定义 字体 大 小 。 例 如 ， 如 果 父 元 素 字体 大 小 为 12 像素 ， 而 
子 元 素 的 字体 大 小 为 2em， 则 实际 大 小 应 该 为 24 像素 。 

加 ”ex: 相对 于 父辈 字体 的 x 高 度 来 定义 字体 大 小 ， 因 此 ex 单位 大 小 既 取 决 于 字体 的 大 小 ， 也 
取决 于 字体 类 型 。 在 固定 大 小 的 情况 下 ， 实 际 的 x 高 度 将 随 字 体 类 型 不 同 而 不 同 。 

回 ”%: 以 百分比 的 形式 定义 字体 大 小 ， 它 与 em 效果 相同 ， 相 对 于 父辈 字体 的 大 小 来 定义 字体 
大 小 。 

四 larger 和 smaller: 这 两 个 关键 字 将 以 父 元 素 的 字体 大 小 为 参考 进行 换算 。 

【示例 1】 本 示例 演示 了 如 何 为 网 页 文档 定义 字体 大 小 。 新 建 网 页 ， 保 存 为 test.html， 在 <head> 

， 标签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 设 置 网 页 字体 默 

。 认 大 小 、 正 文字 体 大 小 ， 以 及 栏目 中 字体 大 小 。 


body {font-size:12px:} 计 以 像素 为 单位 设置 字体 大 小 */ 
Pp {font-size:0.75em;} /# 以 父辈 字体 大 小 为 参考 设置 大 小 */ 


。 DO 。 
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div {font:9pt Arial, Helvetica, sans-serif:} 此 以 点 为 单位 设置 字体 大 小 */ 


【示例 2】 正确 规划 网 页 字体 大 小 。 网 页 设计 师 常用 的 字体 大 小 单位 包括 像素 和 百分比 ， 本 示例 
围绕 这 两 个 单位 进行 讨论 和 练习 。 
回 ”对 于 网 页 宽度 固定 或 者 栏目 宽度 固定 的 布局 ， 使 用 像素 是 正确 的 。 
回 ”对 于 页 面 宽度 不 固定 或 者 栏目 宽度 也 不 固定 的 页 面 ， 使 用 百分比 或 em 是 正确 选择 。 
从 用 户 易 用 性 角度 考虑 ， 定 义 字体 大 小 应 该 以 em (或 %) 为 单位 进行 设置 。 主 要 考虑 因素 是 : 
一 方面 ， 有 利于 客户 端 浏览 器 调整 字体 大 小 ， 另 一 方面 ， 通 过 设置 字体 大 小 的 单位 为 em 或 百分比 ， 
使 字体 能 够 适应 版 面 宽度 的 变化 。 
【操作 步 又】 
第 1 步 ， 新 建 一 个 网 页 ， 保 存 为 testl.html， 在 <body> 标 签 内 输入 如 下 结构 。 





<div id="content"> 框 架 
<div id="sub"> 子 框架 
<p> 段 落 文本 </p> 
</div> 
</div> 


第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定义 一 个 内 部 样式 表 。 然后 定义 样式 ， 
设计 页 面 正文 字体 大 小 为 12 像素 ， 使 用 em 来 设置 ， 则 代码 如 下 。 


body {/* 网 页 字体 大 小 */ 
font-size:0.75em: /*# 约 等 于 12 像素 */ 


计算 方法 为 : 浏览 器 默认 字体 大 小 为 16 像素 , 用 16 像素 乘 以 0.75 即 可 得 到 12 像素 。 同 样 的 道 
理 ， 预 设 14 像素 ， 则 应 该 是 0.875em; 预 设 10 像素 ， 则 应 该 是 0.62Sem。 

第 3 步 , 在 复杂 结构 中 如 果 反 复 选 择 em 或 百分比 作为 字体 大 小 , 可 能 会 出 现 字 体 大 小 显示 混乱 的 
状况 。 如 果 修 改 上 面 代码 中 的 样式 ， 分 别 定义 body、div 和 op 元 素 的 字体 大 小 为 0.75em， 由 于 em 单位 
是 以 上 级 字体 大 小 为 参考 进行 显示 ， 所 以 在 浏览 器 中 预览 就 会 发 现 正 文 文字 看 不 清楚 ， 如 图 3.1 所 示 。 


body, div, p {font-size:0.7Sem;} 
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图 3.1 以 em 为 单位 所 带 来 的 隐患 


。 Df/*。 
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窑 提示 : 根据 第 2 步 的 计算 方法 ， body 字体 大 小 应 该 为 12 像素 ， 而 <div id="content"> 内 字体 大 小 
只 为 9 像素 ,<div id="sub"> 内 字体 只 为 7 像素 , 段落 文本 的 字体 大 小 只 为 5 像素 。 所 以 ， 
不 要 误 套 使 用 em 单位 定义 字体 大 小 。 


3.1.3 ”定义 字体 颜色 
CSS 使 用 color 属性 来 定义 字体 颜色 ， 用 法 如 下 。 
color : color 


参数 color 表示 颜色 值 。 

【示例 】 本 示例 演示 了 如 何在 文档 中 定义 字体 上 颜色。 新建 一 个 网 页 ， 保 存 为 test.html， 在 <head> 
标签 内 添加 <style type='"text/css"> 标 签 ， 定 义 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 页 面 、 段 落 文本 、 
<div> 标 签 、<span> 标 签 包 含 的 字体 的 颜色 。 


body { color:gray:} /# 使 用 颜色 名 */ 

p { color:#666666:} /# 使 用 十 六 进 制 */ 
div { color:rgb(120,120,120):} /# 使 用 RGB */ 
span { color:rgb(50%,50%,50%):} /* 使 用 RGB */ 


峰 提示 : CSS 3 新 增 以 下 3 种 颜色 表示 法 。 

回 RGBA 颜色 表示 法 

RGBA 颜色 表示 法 是 在 RGB 颜色 的 基础 上 增加 了 Alpha 通道 ， 这 样 就 可 以 定义 半 透 明 的 颜色 。 
例如 ，color:rgba(255,0,0,5): 声 明 可 以 定义 半 透 明 的 红色 。 

回 HSL 颜色 表示 法 

HSL 颜色 表示 法 是 使 用 色相 (也 )、 饱和 度 (S ) 和 亮度 ( 工 ) 表 示 颜 色 的 一 种 方法 。 例 如 , colorhsl(0， 
1009%%,100%); 表 示 红 色 。 

回 HSLA 颜色 表示 法 

HSLA 颜色 表示 法 是 在 HSL 颜色 的 基础 上 增加 了 Alpha 通道 。 例 如 ，color:hsla(0, 100%6,1009%6.5): 
表示 半 透 明 的 红色 。 


3.1.4 定义 字体 粗细 
CSS 使 用 font-weight 属性 来 定义 字体 粗细 ， 用 法 如 下 。 
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 


font-weight 属性 取 值 比较 特殊 ， 其 中 normal 关键 字 表 示 默 认 值 ， 即 正常 的 字体 ， 相 当 于 取 值 为 
400。bold 关键 字 表 示 粗 体 ， 相 当 于 取 值 为 700 或 者 使 用 <b> 标 签 定 义 的 字体 效果 。bolder( 较 粗 )》 和 
lighter 〈 较 细 ) 是 相对 于 normal 字体 粗细 而 言 的 。 


。 D8。 
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另外 ， 也 可 以 设置 值 为 100、200、300、400、500、600、700、800、900， 它 们 分 别 表示 字体 的 
粗细 ， 是 对 字体 粗细 的 一 种 量化 方式 ， 值 越 大 就 表示 越 粗 ， 相 反 就 表示 越 细 。 

【示例 】 本 示例 演示 如 何 定义 网 页 对 象 的 字体 粗细 样式 。 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 
<head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 分 别 定 
义 段 落 文本 、 一 级 标题 、<div> 标 俭 包含 字体 的 粗细 效果 ， 同 时 定义 一 个 粗 体 样式 类 。 





p { font-weight: normal } /# 等 于 400 */ 
Rn 700 /* 等 于 bold */ 
div{ font-weight: bolder } /# 可 能 为 500 */ 
.bold {/* 粗 体 样式 类 */ 

font-weight:bold: /# 加 粗 显 示 */ 
} 


< 负 注 意 : 设置 字体 粗细 也 可 以 称 为 定义 字体 的 重量 。 对 于 中 文 网 页 设计 来 说 ， 一 般 使 用 bold (加 
粗 ) 和 normal (普通 ) 两 个 属性 值 即 可 。 


3.1.5 定义 斜体 字体 


CSS 使 用 font-style 属性 来 定义 字体 倾斜 效果 ， 用 法 如 下 。 





font-style : normal | italic | oblique 


其 中 ，normal 表示 默认 值 ， 即 正常 的 字体 ; italic 表示 和 斜体 ;， oblique 表示 倾斜 的 字体 。italic 和 
oblique 两 个 取 值 只 在 英文 等 西方 文字 中 有 效 。 
【示例 】 本 示例 演示 了 如 何 为 网 页 定义 斜体 样式 类 。 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <head> 
标签 内 添加 <style type="textiess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 一 个 斜体 样 
.italic {/* 斜体 样式 类 */ 
font-style:italic: /# 斜体 */ 
} 


在 <body> 标 签 中 输入 一 行 段 沙文 本， 并 把 冬 体 样式 类 应 用 到 该 段 沙文 本 中 。 


<p> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 。<span class="italice">“ 了 昨夜 西 风 凋 腰 树 ， 独 上 高 楼 ， 
望 尽 天 涯 路 ”</span>， 此 第 一 境 也 。<span class="italic">“ 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 ”</span>， 此 第 
二 境 也 。<span class="italie">“ 众 里 寻 他 干 百度 ， 菊 然 回 首 ， 那 人 却 在 ， 灯 火 闲 丙 处 。”</span>， 此 第 三 境 
也 。 此 等 语 皆 非 大 词 和 不 能 道 。</p> 


。 DO9O。 
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3.1.6 ”定义 下 划 线 
CSS 使 用 text-decoration 属性 来 定义 字体 下 划 线 效果 ， 用 法 如 下 。 


text-decoration : none || underline || blink || overline || line-through 


其 中 , none 表示 默认 值 , 即 无 装饰 字体 ; underline 表示 下 划 线 效果 ; blink 表示 闪烁 效果 ; overline 
表示 上 划 线 效果 ; line-through 表示 删除 线 效果 。 


【操作 步骤 】 
第 1 步 ， 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 


义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 3 个 装饰 字体 样式 类 。 





.underline {text-decoration:underline:} /# 下 划 线 样式 类 */ 
.Overline {text-decoration:overline:} /# 上 划 线 样式 类 */ 
.line-through {text-decoration:line-through:} ”/* 删除 线 样式 类 */ 


第 2 步 ， 在 <body> 标 俭 中 输入 3 行 段落 文本 ， 并 分 别 应 用 上 面 的 装饰 类 样式 。 


<p class="underline"> 昨 夜 西风 凋 采 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 </p> 
<p class="overline"> 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 </p> 
<p class="line-through"> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 ， 灯 火 痣 珊 处 。</p> 


第 3 步 ， 再 定义 一 个 样式 ， 在 该 样式 中 ， 同 时 声明 多 个 装饰 值 ， 定 义 的 样式 如 下 。 
.line {text-decoration:line-through overlineunderline:} 

第 4 步 ， 在 正文 中 输入 一 行 段落 文本 ， 并 把 这 个 line 样式 类 应 用 到 该 行文 本 中 。 
<p class="line"> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 。</p> 


第 5$ 步 ， 在 浏览 髓 中 预览 ， 可 以 看 到 最 后 一 行文 本 显示 多 种 修饰 线 效 果 ， 如 图 3.2 所 示 。 


< 5 [HET 
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图 3.2 多 种 修饰 线 的 应 用 效果 
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CSS 使 用 font-variant 属性 来 定义 字体 大 小 写 效果 ， 该 属性 用 法 如 下 。 





e。 60 。 
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font-variant : normal | small-caps 





其 中 ，normal 表示 默认 值 ， 即 正常 的 字体 ，small-caps 表示 小 型 的 大 写字 母 字体 。 : 于 
【示例 1】 本 示例 演示 了 如 何 定义 大 写字 体 样式 。 新建 一 个 网 页 ， 保 存 为 test.html， 在 <head> 
标签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 一 个 类 


样式 。 
.small-caps {/* 小 型 大 写字 母 样式 类 */ 
font-variant:small-caps; 


} 
然后 在 <body> 标 签 中 输入 一 行 段 落 文 本 ， 并 应 用 上 面 定义 的 类 样式 。 





<p class="small-caps">font-variant </p> 


注意 ，font-variant 仅 支 持 以 英文 为 代表 的 西 文字 体 ， 中 文字 体 没有 大 小 写 效 果 区 分 。 如 果 设 置 
了 小 型 大 写字 体 ， 但 是 该 字体 没有 找到 原始 小 型 大 写字 体 ， 则 浏览 器 会 模拟 一 人 个。 例如， 可 通过 使 
用 一 个 常规 字体 ， 并 将 其 小 写字 母 蔡 换 为 缩小 过 的 大 写字 母 。 

窑 提示 : CSS 还 定义 了 一 个 text-transform 属性 ， 该 属性 也 能 够 定义 字体 大 小 写 效果 。 不 过 该 属性 
主要 定义 单词 大 小 写 样式 ， 用 法 格式 如 下 。 

text-transform : none | capitalize | uppercase | lowercase 

其 中 , none 表示 默认 值 ; capitalize 表示 将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 其 余 无 转换 发 生 ; 
uppercase 表示 把 所 有 字母 都 转换 成 大 写 ; lowercase 表示 把 所 有 字母 都 转换 成 小 写 。 

【示例 2】 本 示例 借助 text-transform 属性 定义 首 字母 大 写 、 全 部 大 写 和 全 部 小 写 3 个 样式 类 。 新 
建 一 个 网 页 ， 保 存 为 testl.html， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定义 一 个 内 部 样式 
表 ， 然 后 输入 下 面 样式 ， 定 义 3 个 类 样式 。 

.capitalize {text-transform:capitalize;}/* 首 字母 大 小 样式 类 */ 

.uppercase {text-transform:uppercase:;}/* 大 写 样 式 类 */ 

.lowercase {text-transform:lowercase:}/* 小 写 样 式 类 */ 

在 <body> 标 签 中 输入 3 行 段落 文本 ， 并 分 别 应 用 上 面 定义 的 类 样式 。 


<p class="capitalize">text-transform:capitalize:</p> 
<p class="uppercase">text-transform:uppercase;</p> 
<p class="lowercase">text-transform:lowercase;</p> 
分 别 在 下 和 Firefox 浏览 器 中 预览 ， 则 会 发 现 : 正 认为 只 要 是 单词 就 把 首 字母 转换 为 大 写 ， 如 
图 3.3 所 示 ; 而 Firefox 认为 只 有 单词 通过 空格 间 隅 之 后 ， 才 能 够 成 为 独立 意义 上 的 单词 ， 所 以 几 个 
单词 连 在 一 起 时 就 算 作 一 个 词 ， 如 图 3.4 所 示 。 
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Text-Transform:capitalize: 


TEXT-TRANSFORM:UPPERCASE: Text-transform:capitalize; 


text-transform:lowercase: TEXT-TRANSFORM:UPPERCASE; 


text-transform:lowercase: 





图 3.3 正中 解析 的 大 小 写 效果 图 3.4 Firefox 中 解析 的 大 小 写 效果 


3.2 文本 基本 样式 


文本 样式 主要 涉及 多 个 字符 的 排版 效果 。CSS 在 命名 属性 时 ， 使 用 font 前 级 和 text 前 级 来 区 分 
字体 和 文本 属性 。 


3.2.1 ”定义 水 平 对 齐 
CSS 使 用 text-align 属性 来 定义 文本 的 水 平 对 齐 方式 ， 用 法 如 下 。 


text-align : left | right | center | justify 


该 属性 取 值 包括 4 个 : left 表示 左 对 齐 ， 默 认 值 ; right 表示 右 对 齐 ; center 表示 居中 对 齐 ; justify 
表示 两 端 对 齐 。CSS3 新 增 了 4 个 属性 : start | end | match-parent | justify-all， 由 于 浏览 器 支持 不 是 很 
好 ， 读 者 可 以 先 暂 时 了 解 。 

【示例 1】 本 示例 定义 文档 中 段落 文本 居中 显示 。 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <head> 标 签 
内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 大 中 对 齐 类 样式 。 


.center { text-align:center:;}/* 居中 对 齐 类 样式 */ 
在 <body> 标 签 中 输入 两 行 段落 文本 ， 并 分 别 使 用 传统 的 HIMLalign 属性 和 标准 设计 中 CSS 的 
| text-align 属性 定义 文本 居中 。 


<p align="center"> 上 昨夜 西风 凋 莫 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 </p><!-- 传统 居中 对 齐 方式 --> 
<p class="center"> 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 </p> <!-- 标准 居中 对 齐 方式 --> 
<!-- 标准 居中 对 齐 方式 --> 

<p class="center"> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 ， 灯 火 痣 珊 处 </p> 


在 浏览 器 中 预览 ， 可 以 看 到 使 用 传统 方式 和 标准 方式 设计 文本 居中 的 效果 是 相同 的 。 
【示例 2】 当 text-align 属性 取 值 为 justify 时 ， 可 以 结合 text-justify 属性 实现 更 多 对 齐 样式 。 本 示 


e。 GO2。 
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例 定义 第 一 段 文本 两 端 对 齐 ， 第 二 段 文 本 保持 默认 对 齐 方式 ， 效 果 如 图 3.5 所 示 。 


<style type="text/css"> 
#paragl] {* 强 制 所 有 文本 行 都 两 端 对 齐 ， 包 括 最 后 一 行 ， 不 够 一 行 ， 会 自动 添加 空格 来 实现 两 端 对 齐 。 该 
规则 仅 适 合 正 浏览 器 */ 





text-align:justify:; 
text-justify:distribute-all-lines:; 
} 
</style> 


<p 1d="paragl1">text-align:justify;</p> 
<p>text-justify:distribute-all-lines;</p> 


多 xl EE hitp://localhost/m PDP» BO 多 localhost x 
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text-justify-distnbute-all-lmes. 





图 3.5 ”两 端 对 齐 和 默认 对 齐 显示 
3.2.2 ”定义 垂直 对 齐 


CSS 使 用 vertical-align 属性 来 定义 文本 垂直 对 齐 方式 ， 用 法 如 下 。 


vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length 





取 值 简单 说 明 如 下 。 

auto: 表示 将 根据 layout-flow 属性 的 值 对 齐 对 象 内 容 。 

baseline: 默认 值 ， 表 示 将 支持 valign 特性 的 对 象 内 容 与 基线 对 齐 。 
sub: 表示 垂直 对 齐 文本 的 下 标 。 

super: 表示 垂直 对 齐 文本 的 上 标 。 

top: 表示 将 支持 valign 特性 的 对 象 的 内 容 对 象 顶 端 对 齐 。 

text-top: 表示 将 支持 valign 特性 的 对 象 的 文本 与 对 象 项 端 对 齐 。 
middle: 表示 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 中 部 对 齐 。 
bottom: 表示 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 底 闪 对 齐 。 
text-bottom: 表示 将 支持 valign 特性 的 对 象 的 文本 与 对 象 底 端 对 齐 。 
length: 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 者 自分 数 ， 可 为 负数 ， 定 义 由 基线 算 
起 的 偏 移 量 ， 基 线 对 于 数值 来 说 为 0， 对 于 百分数 来 说 就 是 0%。 


和 的 多 鲜 的 的 的 多 的 的 


。063。 


Ge 网 页 样式 与 市 局 从 入 门 到 精通 ( 微 课 精 编 版 ) 





【示例 1】 本 示例 将 演示 如 何 设 置 字体 垂直 对 齐 。 新 建 一 个 网 页 ， 保 存 为 testl.html， 在 <head> 标 
俭 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 上 标 类 样式 。 


: -Super {vertical-align:super;} 
| 在 <body> 标 签 中 输入 一 行 段 落 文 本 ， 并 应 用 该 上 标 类 样式 。 


<p>vertical-align 表示 垂直 <span class=" super "对 齐 </span> 属 性 </p> 


在 浏览 器 中 预览 ， 则 显示 效果 如 图 3.6 所 示 。 


XxX 
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vertical-align 表 示 垂 直 对 齐 属性 





图 3.6 文本 上 标 样式 效果 


【示例 2】 本 示例 演示 了 不 同 垂直 对 齐 方式 的 比较 效果 。 

vertical-align 属性 提供 的 值 很 多 ， 但 是 正 浏览 器 与 其 他 浏览 占 对 于 解析 它们 的 效果 却 存 在 很 大 
的 分 皮 。 一般 情况 下 , 不 建议 广泛 使 用 这 些 属性 值 ， 实践 中 主要 用 到 vertical-align 属性 的 垂直 居中 样 
式 ， 偶 尔 也 会 用 到 上 标 和 下 标 效 果 。 

新 建 一 个 网 页 ， 保 存 为 test2.html， 在 <body> 标 签 内 输入 如 下 结构 。 


<p>valign: 

<span class="baseline"><1img src="images/box.gif" title="baseline" /></span> 

<span class="sub"><1img src="1mages/box.gif" title="sub" /></span> 

<span class="super"><lmg src="1mages/box.gif" title="super" /></span> 

<span class="top"><1meg src="i1mages/box.gif" title="top" /></span> 

<span class="text-top"><1meg src="i1mages/box.gif" title="text-top" /></span> 

<span class="middle"><1mg src="i1mages/box.gif" title="middle" /></span> 

<span class="bottom"><1img src="i1mages/box.gif" title="bottom" /></span> 

<span class="text-bottom"><1i1mg src="i1mages/box.gif" title="text-bottom" /></span> 
</p> 


在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 内 部 样式 表 。 然 后 定义 如 下 类 样式 。 


body {font-size:48px:;} 
.baseline {vertical-align:baseline;} 
.sub {vertical-align:sub;} 
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.super {vertical-align:super:;} 
.top {vertical-align:top:;} 
.text-top {vertical-align:text-top;} 
.middle {vertical-align:middle:} 
.bottom {vertical-align:bottom:} 


在 浏览 器 中 预 贞 测试 , 则 显示 效果 如 图 3.7 所 示 。 用 户 可 以 通过 效果 图 直观 地 比较 这 些 取 值 的 效果 。 


) 条 直 对 齐 一 ozilla Firefox 人 回回 因 
文件 全) 编辑 E) 查看 WW) 历史 G) 书 物 比较 各 个 属性 什 
-一 GG XK 谷 下 国 |http:71ao 的 显示 效果 
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3.2.3 ”定义 字 距 和 词 距 


CSS 使 用 letter-spacing 属性 定义 字 距 ， 使 用 word-spacing 属性 定义 词 距 。 这 两 个 属性 的 取 值 都 
是 长 度 值 ， 由 浮 点 数字 和 单位 标识 符 组 成 ， 默 认 值 为 normal， 表 示 默 认 间 隔 。 

定义 词 距 时 ， 以 空格 为 基准 进行 调节 ， 如 果 多 个 单词 连 在 一 起 ， 则 被 word-spacing: 视 为 一 个 单 
词 ; 如 果 汉 字 被 空格 分 隔 ， 则 分 隅 的 多 个 汉字 就 被 视 为 不 同 的 单词 ，word-spacing 属性 此 时 有 效 。 

【示例 】 本 示例 演示 了 如 何 定义 字 距 和 词 距 样式 。 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <head> 标 
签 内 添加 <style type="text/css"> 标 签 ， 定 义 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 两 个 类 样式 。 


.lspacing {letter-spacing: lem:} 
.wspacing {word-spacing: lem:} 





图 3.7 垂直 对 齐 取 值 效 果 比 较 


/# 字 距 类 样式 */ 
/# 词 距 类 样式 */ 


在 <body> 标 签 中 输入 两 行 段落 文本 ， 并 应 用 上 面 两 个 类 样式 。 


<p class="lspacing">letter spacing word spacing (〈 字 间距 ) </p> 


<p class="wspacing">letter spacing word spacing ( 词 间距 ) </p> 


在 浏览 占 中 预 究 ， 则 显示 效果 如 图 3.8 所 示 。 从 图 中 可 以 直观 地 看 到 ， 所 谓 字 距 就 是 定义 字母 之 


间 的 间距 ， 而 词 距 就 是 定义 西 文 单词 的 距离 。 





图 3.8” 字 距 和 词 距 演示 效果 比较 
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< 人 注意 : 字 距 和 词 距 一 般 很 少 使 用 ， 使 用 时 应 慎重 考虑 用 户 的 阅读 体验 和 感受 。 对 于 中 文 用 户 来 
说 ，letter-spacing 属性 有 效 ， 而 word-spacing 属性 无 效 。 
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3.2.4 定义 行 高 
行 高 也 称 为 行距 ， 是 段落 文本 行 与 文本 行 之 间 的 距离 。CSS 使 用 line-height 属性 定义 行 高 ， 用 法 
如 下 。 


line-height : normal | length 


其 中 ，normal 表示 默认 值 ， 一 般 为 1.2em; length 表示 百分比 数字 ， 或 者 由 浮 点 数字 和 单位 标识 
符 组 成 的 长 度 值 ， 允 许 为 负 值 。 

【示例 1】 本 示例 演示 了 如 何 定义 段落 文本 行 高 样式 。 新 建 一 个 网 页 ,保存 为 test.html， 在 <head> 
标签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 两 个 行 高 类 
样式 。 


.Pl {l* 行 高 样式 类 1 */ 


line-height: lem:; /# 行 高 为 一 个 字 大 小 */} 
.p2 {/* 行 高 样式 类 2 */ 
line-height:2em:; /# 行 高 为 两 个 字 大 小 */} 


在 <body> 标 签 中 输入 两 行 段落 文本， 并 应 用 上 面 两 个 类 样式 。 


<hl> 人 生 三 境界 </h1> 

<h2> 出 自 王 国 维 《 人 间 词 话 》</h2> 

<p class="p1"> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 : "昨夜 西风 凋 胜 树 。 独 上 高 楼 ， 望 尽 天 涯 
路 。" 此 第 一 境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 
在 ， 灯 火 痣 珊 处 。" 此 第 三 境 也 。 此 等 语 缘 非 大 词 人 不 能 道 。 然 如 以 此 意 解释 诸 词 ， 恐 为 受 欧 诸 公 所 不 许 也 。 
</p> 

<p class="p2"> 笔 者 认为 ， 凡 人 都 可 以 从 容 地 做 到 第 二 境界 ， 但 要 想 逾 越 它 却 不 是 那么 简单 。 成 功 人 士 果 
敢 坚 忍 ， 不 屈 不 挠 ， 造 就 了 他 们 不 同 于 凡人 的 成 功 。 他 们 请 越 的 不 仅仅 是 人 生 的 境界 ， 更 是 他 们 自我 的 极限 。 
成 功 后 回 望 来 路 的 人 ， 才 会 明白 另 解 这 三 重 境界 的 话 : 看 山 是 山 ， 看 水 是 水 ; 看 山 不 是 山 ， 看 水 不 是 水 ; 看 山 
还 是 山 ， 看 水 还 是 水 。</p> 


在 浏览 器 中 预览 ， 则 显示 效果 如 图 3.9 所 示 。 
【示例 2】 本 示例 演示 了 不 同 取 值 下 ， 行 高 样式 的 比较 效果 。 行 高 取 值 单位 一 般 使 用 em 或 百 分 
比 ， 很 少 使 用 像素 ， 也 不 建议 使 用 。 
名 ” 当 line-height 属性 取 值 小 于 一 个 字 大 小 时 ， 就 会 发 生 上 下 行文 本 重 登 的 现象 。 在 上 面 的 示 
例 基础 上 ， 修 改定 义 的 类 样式 。 


.pl { lne-helght0.Sem:} 
.p2 { line-height:0em:;} 
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在 浏览 器 中 预览 ， 显 示 效 果 如 图 3.10 所 示 ， 说 明 当 取 值 小 于 字体 大 小 时 ， 多 行文 本 会 发 生 重 释 
现象 。 
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回首 ， 部 人 却 在 ， 灯 火 困 天 处 。" 此 第 三 境 也 。 

词 ， 起 全 守信 入 容 处 四 

笔者 认为 ， 凡 人 都 可 以 从 容 地 做 到 第 二 境界 ， 但 要 想 请 越 它 却 不 是 那么 简单 。 成 功 人 士 果敢 坚 
忍 ， 不 屈 不 挠 ， 造 就 了 他 们 不 同 于 凡人 的 成 功 。 他 们 诊 越 的 不 仅仅 是 人 生 的 境界 ， 更 是 他 们 上 自 
我 的 极限 。 成 功 后 回 望 来 路 的 人 ， 才 会 明白 另 解 这 三 重 境 界 的 话 ， 看 山 是 山 ， 看 水 是 水 ;看 山 
不 是 山 ， 看 水 不 是 水 ， 看 山 还 是 山 ， 看 水 还 是 水 。 


，" 昨 夜 西风 调 匆 树 。 独 上 高 楼 ， 望 尽 天 涯 
et 


- 





图 3.9 段落 文本 的 行 高 演示 效果 


-Sree -selexs ss 
人 人 宝 三 声 丰 
出 自 王国 维 《 人 间 词 话 》 


今 本 二 类 大 隐 二 4 介 J 人 字符 
下 下 公 S © a 


签 钨 委 眼 看 换 贞 臣 寻 于 六 物 古 映 到 康 大 错 克 量 根 劳 相 症 炬 篇 纳 黎 是 天 和 化 钥 境 县 现时 挫 抱 粉 息 





图 3.10 段落 文本 重 登 演示 效果 


四 一般 行 高 的 最 佳 设 置 范 围 为 1.2em~1.8em， 当 然 对 于 特别 大 的 字体 或 者 特别 小 的 字体 ， 可 
以 特殊 处 理 。 因 此 ， 有 用户 可 以 遵循 字体 越 大 、 行 高 越 小 的 原则 来 定义 段落 行 高 。 例 如 ， 如 
果 段 落 字 体 大 小 为 12px， 则 行 高 设置 为 1.8em 比较 合适 ; 如 果 段 落 字 体 大 小 为 14px， 则 行 
高 设置 为 1.5em~1.6em 比较 合适 ; 如果 上 段落 字体 大 小 为 16px~18px， 则 行 高 设置 为 1.2em 
比较 合适 。 一 般 浏 览 器 默认 行 高 为 1.2em 左右 。 例 如 ，IE 默认 为 19px， 如 果 除 以 默认 字体 
大 小 (16px)， 则 约 为 1.18em; 而 Firefox 默认 为 1.12em。 

【示例 3】 本 示例 演示 了 如 何 设置 更 灵活 的 行 高 样式 。 

用 户 可 以 给 line-height 属性 设置 一 个 数值 ， 但 是 不 设置 单位 。 例 如 : 


body { line-height:1.6;} 


这 时 浏览 器 会 把 它 作 为 1.6em 或 者 160%, 也 就 是 说 页 面 行 高 实际 为 19px。 利 用 这 种 特殊 的 现象 ， 


可 以 解决 多 层 榜 套 结 构 中 行 高 继承 出 现 的 问题 。 
新 建 一 个 网 页 ， 保 存 为 test2.html， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定义 一 个 内 


es。 Or。 
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部 样式 表 ， 然 后 输入 下 面 的 样式 ， 设 置 网 页 和 段落 文本 的 默认 样式 。 


1 
ze 作 因 : font-size:12px: 
Note line-height:1.6em:; 


} 
p { font-size:30px:} 


在 <body> 标 签 中 输入 如 下 标题 和 上 段落 文本 。 


<hl>《 人 间 词 话 》 节 选 </h1> 

<h2> 王 国 维 </h2> 

<p> 上 古今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 : "昨夜 西风 凋 匠 树 。 独 上 高 楼 ， 望 尽 天 涯 路 。" 此 第 
一 境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 ， 灯 火 
痣 珊 处 。" 此 第 三 境 也 。 此 等 语 皆 非 大 词 人 不 能 道 。 然 下 以 此 意 解 释 诸 词 ， 恐 为 曼 欧 诸 公 所 不 许 也 。</p> 


上 面 示例 定义 body 元 素 的 行 高 为 1.6em。 由 于 line-height 具有 继承 性 ， 因 此 网 页 中 的 段落 文本 
的 行 高 也 继承 body 元 系 的 行 高。 浏览 絮 在 继承 该 值 时 ， 并 不 是 继承 “1.6em” 这 个 值 ， 而 是 把 它 转 
换 为 精确 值 ( 即 19px) 之 后 再 继承 , 换 句 话说 , p 元 素 的 行 高 为 19px, 但 是 p 元 厅 的 字体 大 小 为 30px， 
继承 的 行 高 小 于 字体 大 小 ， 就 会 发 生 文 本 行 重合 现象 。 如 果 在 浏览 器 中 预 狗 ， 则 演示 效果 如 图 3.11 





所 示 。 
Fe 二 下 
\ 形 省 鹿 ， 她 为 
图 3.11 错误 的 行 高 继承 效果 
解决 方法 如 下 。 


在 定义 body 元 素 的 行 高 时 ， 不 为 其 设置 单位 ， 即 直接 定义 为 line-height:1.6， 这 样 页 面 中 其 他 元 
素 所 继承 的 值 为 1.6， 而 不 是 19px， 则 内 部 继承 元 泰 就 会 为 继承 的 值 1.6 附加 默认 单位 em， 最 后 足 
面 中 所有 继承 元 素 的 行 遍 都 为 1.6em。 


body { 
font-size:12px;: 
line-height:1.6; 

} 

p { font-size:30px:} 
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3.2.5 定义 缩 进 
CSS 使 用 text-indent 属性 定义 首 行 缩 进 ， 用 法 如 下 。 


text-indent : length 


length 表示 百分比 数字 ， 或 者 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 建 议 在 设置 
缩 进 单位 时 ， 以 em 为 设置 单位 ， 它 表示 一 个 字 距 ， 这 样 比较 精确 确定 首 行 缩 进 效果 。 

【示例 1】 本 示例 演示 了 如 何 为 段落 文本 定义 首 行 缩 进 效果 。 新 建 一 个 网 页 ， 保 存 为 testhtml， 
在 <head> 标 签 内 添加 <style type='"text/css"> 标 答 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 段 
落 文 本 首 行 缩 进 两 个 字 距 。 


Pp {text-indent:2em;} 谍 首 行 缩 进 两 个 字 距 */ 


在 <body> 标 位 中 输入 如 下 标题 和 段落 文本 。 


<hl> 人 生 三 境界 </h1> 

<h2> 出 自 王国 维 《 人 间 词 话 》</h2> 

<p> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 : "昨夜 西 风 凋 拍 树 。 独 上 高 楼 ， 望 尽 天 涯 路 。" 此 第 
一 境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 暮 然 回首 ， 那 人 却 在 ， 灯 火 
痣 珊 处 。" 此 第 三 境 也 。 此 等 语 皆 非 大 词 人 不 能 道 。 然 不 以 此 意 解释 诸 词 ， 恐 为 曼 欧 诸 公 所 不 许 也 。</p> 

<p> 笔 者 认为 ， 凡 人 都 可 以 从 容 地 做 到 第 二 境界 ， 但 要 想 傅 越 它 却 不 是 那么 简单 。 成 功 人 士 果 敢 坚 忍 ， 不 
届 不 找 ， 造 就 了 他 们 不 同 于 凡人 的 成 功 。 他 们 逾越 的 不 仅仅 是 人 生 的 境界 ， 更 是 他 们 自我 的 极限 。 成 功 后 回 望 
来 路 的 人 ， 才 会 明白 另 解 这 三 重 境界 的 话 : 看 山 是 山 ， 看 水 是 水 ; 看 山 不 是 山 ， 看 水 不 是 水 ; 看 山 还 是 山 ， 看 
水 还 是 水 。</p> 


在 浏览 器 中 预览 ， 则 可 以 看 到 文本 缩 进 效果 。 

【示例 2】 使 用 text-indent 属性 可 以 设计 悬垂 缩 进 效 果 。 新 建 一 个 网 页 ， 保 存 为 testl.html， 在 
<head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 段 
沙文 本 首 行 缩 进 负 的 两 个 字符 ， 并 定义 左 侧 内 部 补 日 为 两 个 字符 。 


p {/* 悬垂 缩 进 两 个 字 距 */ 


text-indent:-2em: /# 首 行 缩 进 */ 
padding-left:2em:; 谍 左 侧 补 白 */ 


} 


text-indent 属性 可 以 取 负 值 ， 定 义 左 侧 补 白 ， 是 为 防止 取 负 值 缩 进 导 致 首 行 文本 伸 到 段落 的 边界 
外 边 。 
在 <body> 标 签 中 输入 如 下 标题 和 段落 文本 。 


<hl>《 人 间 词 话 》 节 选 </h1> 
<h2> 王 国 维 </h2> 


。6069。 
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<p> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 : "昨夜 西风 凋 莫 树 。 独 上 高 楼 ， 望 尽 天 涯 路 。" 此 第 
一 境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 。" 此 第 二 境 也 。" 众 里 寻 他 千百度， 募 然 回首 ， 那 人 却 在 ， 灯 火 

。 前 名 处 。" 此 第 三 境 也 。 此 等 语 皆 非 大 词 人 不 能 道 。 然 达 以 此 意 解释 诸 词 ， 恐 为 受 欧 诸 公所 不 许 也 。<p> 
在 浏览 器 中 预览 ， 则 可 以 看 到 文本 悬垂 缩 进 效果 ， 如 图 3.12 所 示 。 


X 


-rapecate. -sc ex > 国 世 
《人 间 词 话 》 节 选 
王国 维 

今 这 成 大 事业 、 大 学 回 者， 名 经 计 三 种 之 境界 "放风 


也 。" 众 里 寻 他 干 白 度 ， 意 然 加 
党 三 境 志 。 此 等 语 皆 非 大 词 人 不 能 
道 。 然 下 以 此 解放 下 为 暴 欧 诸 公 所 不 许 也 。 





图 3.12 ”悬垂 缩 进 效 果 


3.3 CSS3 文本 样式 


CSS3 优化 和 增强 了 CSS 2.1 的 字体 和 文本 属性 ， 使 网 页 文字 更 具 表 现 力 和 感染 力 ， 丰 证 了 网 页 
文本 的 样式 和 版 式 。 


3.3.1 定义 文本 阴影 
在 CSS3 中 ， 可 以 使 用 text-shadow 属性 为 文字 添加 阴影 效果 ， 用 法 如 下 。 





text-shadow: none | <shadow> [ , <shadow> |]* 
<shadow> = <length>{2,3} &&<color>? 


text-shadow 属性 的 初始 值 为 无 ， 适 用 于 所 有 元 素 。 取 值 简单 说 明 如 下 。 

加 ”none: 无 阴影 。 

四 ”<length>G: 第 1 个 长 度 值 用 来 设置 对 象 的 阴影 水 平 偏 移 值 。 可 以 为 负 值 。 

MM ”<length>@): 第 2 个 长 度 值 用 来 设置 对 象 的 阴影 垂直 偶 移 值 。 可 以 为 负 值 , 正 值 偏 右 或 偏 下 ， 


负 值 偏 左 或 偏 上 。 
四 “<length>G): 如 果 提 供 了 第 3 个 长 度 值 ， 则 用 来 设置 对 象 的 阴影 模糊 值 〈( 即 模糊 半径 )。 不 
允许 为 负 值 。 


六”<color>: 设置 对 象 的 阴影 的 颜色 ， 该 值 可 选 。 
【示例 】 本 示例 为 段落 文本 定义 一 个 简单 的 阴影 效果 ， 演 示 效 果 如 图 3.13 所 示 。 


<style type="text/css"> 
; pl 


。 /0* 
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text-align: center:; 
font: bold 60px helvetica, arial, sans-serif: 
color: #999: 
text-shadow: 0.1em 0.1lem #333; 
} 
</style> 
<p> 文 本 阴影 : text-shadow</p> 





I htp://localhost/mysite/test.html PD GN localhost 





文本 了 关 影 、te@xt-shadow 





图 3.13 ”定义 文本 阴影 


text-shadow: 0.1em 0.1em #333; 声 明了 右 下 角 文 本 阴影 效果 ， 如 果 把 投影 设置 到 左上 角 ， 则 可 以 
这 样 声明 : 


p {text-shadow: -0.lem -0.1em #333;} 


演示 效果 如 图 3.14 所 示 。 
同 理 ， 如 果 设 置 阴影 在 文本 的 左下 角 ， 则 可 以 设置 如 下 样式 。 


p {text-shadow: -0.lem 0.1lem #333;} 


演示 效果 如 图 3.15 所 示 。 


xX 


并 
© ELT ED Oe /ee ose 


文本 阴影 : 文本 阴影 : 


text-Sshagow text-sliadGow 





图 3.14 定义 左上 角 阴 影 图 3.15 定义 左下 角 阴 影 
也 可 以 增加 模糊 效果 的 阴影 : 


pi{text-shadow: 0.lem 0.lem 0.3em #333; } 
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(sss1DN 网 页 样式 与 市 局 从 入 门 到 精通 ( 微 吝 精 编 县 ) 


效果 如 图 3.16 所 示 。 
或 者 定义 如 下 模糊 阴影 效果 : 


text-shadow: 0.1em 0.lem 0.2em black: 





效果 如 图 3.17 所 示 。 


xX XxX 
ew paolo | < EECEEG ET 


文本 天 影 : 访 李 关 影 : 


text-shadow 3 SNadow 





图 3.16 定义 模糊 阴影 (1) 图 3.17 定义 模糊 阴影 (2) 


在 阴影 偏 移 之 后 ， 可 以 指定 一 个 模糊 半径 。 模 糊 半 径 是 个 长 度 值 ， 指 出 模糊 效果 的 范围 。 模 糊 
”效果 的 具体 算法 没有 指定 。 在 阴影 效果 的 长 度 值 之 前 或 之 后 还 可 以 选择 指定 一 个 颜色 值 。 如 果 没 有 
， 指定 颜色 ， 那 么 将 使 用 color 属性 值 来 替代 。 

号 国 


3.3.2 ”定义 溢出 文本 





text-overflow 属性 可 以 设置 超 长 文本 省 略 显 示 。 基 本 语法 如 下 。 


text-overflow: clip | ellipsis 


适用 于 块 状元 素 ， 取 值 简单 说 明 如 下 。 
回 clip: 当 内 联 内 容 溢出 块 容器 时 ， 将 溢出 部 分 裁 切 掉 ， 为 默认 值 。 
回 ellipsis: 当 内 联 内 容 洲 出 块 容 占 时 ， 将 洲 出 部 分 蔡 换 为 “...”。 


宅 提示 : 在 早期 W3C 文档 ( http://www.w3.org/TR/2003/CR-css3-text-20030514/#textoverflow-mode ) 


中 ，text-overflow 被 纳入 规范 ， 但 是 在 最 新 修订 的 文档 ( http://www.w3.org/TR/css3-text/ ) 
中 没有 再 包含 text-overflow 属性 。 


由 于 W3C 规范 放弃 了 对 text-overflow 属性 的 文 持 ， 所 以 ，Mozilla 类 型 浏览 器 也 放弃 了 对 该 属 
性 的 文 持 。 不 过 ，Mozilladevelopercenter 推荐 使 用 -moz-binding 的 CSS 属性 进行 兼容 。Firefox 支持 


XUL(XUL 是 一 种 XML 的 用 户 界 面 语言 ), 这 样 就 可 以 使 用 -moz-binding 属性 来 绑 定 XUL 里 的 ellipsis 
属性 了 。 


。 AID。 





< 从 注意 : text-overflow 属性 仅 是 内 容 注解 ， 即 当 文本 溢出 时 是 否 显 示 省 略 标 记 ， 并 不 具备 样式 定义 
的 特性 。 要 实现 溢出 时 产生 省 略 号 的 效果 ， 还 应 定义 两 个 样式 : 强制 文本 在 一 行内 显示 
( white-space:nowrap ) 和 溢出 内 容 为 隐藏 (overflow:hidden ) ， 只 有 这 样 才 能 实现 溢出 文 


本 显示 省 略 号 的 效果 。 


【示例 】 本 示例 设计 了 一 个 新 闻 列 表 有 序 显 示 效 果 ， 对 于 超出 指定 宽度 的 新 闻 项 ， 则 使 用 
text-overflow 属性 省 略 并 附加 省 略 号 ， 避 免 新 闻 换 行 或 者 撑 开 版 块 ， 演 示 效 果 如 图 3.18 所 示 。 
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唐诗 名 句 精 选 


科 海内 存 知己 ， 天 涯 若 比 邻 。 唐 -王勃 必 送 杜 少 府 之 -…: 


和 怕 不 知 细 叶 谁 裁 出 ， 二 月 春风 似 剪 刀 。 唐 - 架 知 章 《.… 
名 欲 穷 二 里 目 ， 更 上 一 层 楼 。 唐 ` 王 之 澳 改 登 岗 党 楼 作 
和 野 旷 天 低 树 ， 江 清 月 近 八 。 唐 孔 湛 然 宿 建 德江 光 
名 | 大 漠 孤 烟 直 ， 长 河 落日 圆 。 唐 王 维 丸 使 至 塞 上 





图 3.18 设计 固定 宽度 的 新 闻 栏 目 


示例 代码 如 下 。 


<style type="text/css"> 
dl {/* 定 义 新 闻 栏 目 外 框 ， 设 置 固定 宽度 */ 


width:300px; 
border:solid 1px #ccece:;: 

} 

dt { 访 设 计 新 闻 栏 目标 题 行 样式 */ 
padding:8px 8px; 


margin-bottom:12px; 
background:#7FECAD url(images/green.glf repeat-x: 
上 * 定 义 字体 样式 */ 
font-slze:13px:font-welght:bold:color:#71790C; 
text-align:left: 
border-bottom:solid lpx #efefef: 
} 
dd {* 设 计 新 闻 列 表 项 样式 */ 
font-size:0.78em:; 
刻 固 定 每 个 列表 项 的 大 小 */ 
height:1.Sem:width:280px: 
证 为 添加 新 闻 项 目 符 号 腾 出 空间 */ 


。/3* 


/* 增 加 文本 周围 空 际 */ 
人/# 调 整 底部 间距 #/ 
上 话 设 计 标 题 栏 背 景 图 */ 


此 恢复 文本 默认 左 对 齐 */ 
尺 定 义 浅 色 边 框 线 */ 
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padding:2px 2px 2px 18px;: 

谍 以 背景 方式 添加 项 目 符号 */ 

background: url(1mages/icon.gif) no-repeat 6px 25%: 
margin:2px 0; 

/# 为 应 用 text-overflow 做 准备 ， 禁 止 换 行 */ 
white-space: nowrap; 

诺 为 应 用 text-overflow 做 准备 ， 禁 止 文本 洲 出 显示 */ 
overflow: hidden: 


-0-text-overflow: ellipsis; /# 兼容 Opera */ 
text-overflow: ellipsis: /*# 兼容 IE 和 Safari (WebKit) */ 
-moz-binding: url(images/ellipsis.xml#ellipsis"): /# 兼容 Firefox */ 
} 
</style> 
<dl> 
<dt> 唐 诗 名 句 精 选 </dt> 


<dd> 海 内 存 知己 ， 天 涯 若 比 邻 。 唐 。 王 勃 《 送 杜 少 府 之 任 蜀 州 》</dd> 
<dd> 不 知 细 叶 谁 裁 出 ， 二 月 春风 似 剪 刀 。 唐 。 贺 知 章 《 咏 柳 》</dd> 
<dd> 欲 穷 二 里 目 ， 更 上 一 层 楼 。 唐 。 王 之 痪 《 登 葛 省 楼 》</dd> 
<dd> 野 旷 天 低 树 ， 江 清 月 近 人 。 唐 。 和 孟浩然 《 宿 建 德江 》</dd> 
<dd> 大 漠 孤 烟 直 ， 长 河 落日 圆 。 唐 。 王 维 《 使 至 蹇 上 》</dd> 

</dl> 


在 CSS3 中 ， 使 用 word-break 属性 可 以 定义 文本 目 动 换行 。 基 本 语法 如 下 。 


word-break: normal | keep-all | break-all 


取 值 简单 说 明 如 下 。 

名 ”normal: 为 默认 值 ， 依 照 亚洲 语言 和 非 亚洲 语言 的 文本 规则 ， 人 允许 在 字 内 换行 。 

加。 keep-all: 对 于 中 文 、 韩 文 、 日 文 ， 不 允许 字 断 开 。 适 合 包含 少量 亚洲 文本 的 非 亚洲 文本 。 

四 break-all: 与 normal 相同 ， 人 允许 非 亚 浏 语言 文本 行 的 任意 字 内 断 开 。 该 值 适 合 包含 一 些 非 
亚洲 文本 的 亚洲 文本 ， 如 使 连续 的 英文 字母 间断 行 。 

【补充 了】 

word-break 原来 是 正 私有 属性 ， 在 CSS3 中 被 Text 模块 采用 ， 得 到 Chrome 和 Safari 等 浏览 器 


的 支持 ， 但 不 支持 keep-all 取 值 。 


男 外 ，IE 自 定义 了 多 个 换行 处 理 属性 : line-break、word-break、word-wrap，CSS1 也 定义 了 


white-space。 这 几 个 属性 简单 比较 如 下 。 
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四 line-break: 指定 如 何 〈 或 是 否 ) 断 行 。 除 了 Firefox， 其 他 浏览 器 都 支持 。 取 值 说 明 如 下 
所 示 。 
@ auto: 使 用 默认 的 断 行 规则 分 解 文本 。 
@ ”loose: 使 用 最 松散 的 断 行规 则 分 解 文本 ， 一 般 用 于 短 行 的 情况 ， 如 报纸 。 
@ normal: 使 用 最 一 般 的 断 行 规则 分 解 文 本 。 
@ strict: 使 用 最 严格 的 断 行 规则 分 解 文本 。 
加 ”word-wrap: 允许 长 单词 或 URL 地 址 换行 到 下 一 行 。 所 有 浏览 器 都 支持 。 取 值 说 明 如 下 
所 示 。 
@ normal: 只 在 允许 的 断 字 点 换行 (浏览 器 保持 默认 处 理 )。 


break-word: 在 长 单词 或 URL 地 址 内 部 进行 换行 。 


包 ”word-break: 指定 怎样 在 单词 内 断 行 。 取 值 说 明 参 考 上 面 语 法 。 
四 white-space: 设置 如 何 处 理 元 素 中 的 空格 。 所 有 浏览 器 都 支持 。 取 值 说 明 如 下 所 示 。 


【拓展 】 

在 下 浏览 器 下 ,使 用 word-wrap:break-word: 声 明 可 以 确保 所 有 文本 正常 显示 。 在 Firefox 浏览 器 
下 ， 中 文 不 会 出 现任 何 问题 ， 英 文 语 句 也 不 会 出 现 问 题 。 但 是 ， 长 串 英文 会 出 现 问题 。 为 了 解决 长 
串 英 文 会 出 现 的 问题 ， 一 般 将 word-wrap:break-word: 和 word-break:break-all: 声 明 结合 使 用 。 但 是 ， 这 
种 方法 会 导致 普通 的 英文 语句 中 的 单词 被 断 开 显示 〈 正 下 也 是 ) 的 情况 。 现 在 的 问题 主要 存在 于 长 
串 英 文 和 英文 单词 被 断 开 的 情况 。 

为 了 解决 这 个 问题 ,可 使 用 word-wrap:break-word:overflow:hidden:, 而 不 是 word-wrap:break-word: 
word-break:break-all;:。word-wrap:break-word:overflow:auto: 在 正 下 没有 任何 问题 ， 但 是 在 Firefox 下 ， 
长 串 英 文 单 词 就 会 被 遮 住 部 分 内 容 。 

【示例 】 本 示例 将 在 页 面 中 插入 一 个 表格 ， 由 于 标题 行文 字 较 多 ， 标 题 行 常 被 撑 开 ， 影 响 浏 览 体 
验 。 为 了 解决 这 个 问题 ， 借 助 CSS 换行 属性 进行 处 理 ， 代 码 如 下 。 比 较 效果 如 图 3.19 所 示 。 


<style type="text/css"> 


Bue 
width: 100%: 
font-slze: 14px:; 
border-collapse: collapse; 性 定 义 细 线 表格 */ 
border: 1px solid #cad9ea: /# 添 加 淡色 细 线 边框 #/ 
table-layout: fixed: 上 # 定 义 表格 在 浏览 器 端 逐 步 解 析 呈 现 ， 避 人 免 破坏 布局 状 


normal: 默认 处 理 方 式 。 

pre: 使 用 等 宽 字 体 显 示 预 先 格 式 化 的 文本 ， 不 合并 文字 间 的 空 日 距离 ， 当 文字 超出 边 
界 时 不 换行 。 

nowrap: 强制 在 同一 行内 显示 所 有 文本 ， 合 并 文本 间 的 多 余 空 日 。 

pre-wrap: 使 用 等 宽 字 体 显 示 了 预先 格式 化 的 文本 ,不 合并 文字 间 的 空白 距离 ， 当 文字 碰 
到 边界 时 发 生 换 行 。 

pre-line: 保持 文本 的 换行 ， 不 保留 文字 间 的 空白 距离 ， 当 文字 碰 到 边界 时 发 生 换 行 。 
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<tr> 
<td>white-space</td> 
<td>......</td> 
</tr> 
</table> 


使 用 蝶 一 般 季 区 i 行 
strict, 德 用 最 严格 的 岂 行 原由 分 解 文本 。， 


允许 长 单词 或 DRI 地 址 换行 到 下 一 行 。 所 有 浏览 器 都 支持 。 取 值 包括 : 
normal， 只 在 区 许 的 新 字 点 换行 《浏览 器 保持 味 认 处 理 ) ， 
ver 在 长 单词 或 URL 地 址 内 让 进行 换行 。 


二 和文 本 外 贡生。 Chrome 和 Safari 潮 览 器 支持 不 够 支 籽 。 取 值 包括 : 
: 为 默认 值 ， A 

ecp 贡 训 于 中 文 、 韩文 、 日 文 ， 不 多 许 字 断 开 : 
all， 与 normal 相 同 ， 人 允许 非 亚 省 语 言 文 本 行 的 任意 字 内 断 开 。 


设置 如 何 处 理 元 素 中 的 空格 。 所 有 浏览 吕 都 支持 。 取 午 包 括 


x 


骨 交 这 


COE TTT Ey] 
使 用 说 明 


用 于 指定 如 何 (或 是 否 》 断 行 。 除 了 Firefox， 其 它 浏览 器 都 支持 。 取 值 包 括 : 

auto， 使 用 拟 省 的 晰 行规 则 分 解 文本 ; 

ee 使 用 最 松 甬 的 烛 [行规 则 分 解 交 本 ， 一 般 用 于 短 行 的 情况 ， 加 报纸 ; 
normal， 使 用 最 一 般 的 断 行规 则 分 解 文 本 

strict， 使 用 最 严 桔 的 断 行 原则 分 解 文 本 。 


允许 长 单词 或 URL 地 址 换行 到 下 一 行 。 所 有 浏 师 吕 和 坟 持 。 取 值 自 括 : 
normal， 只 在 允许 的 记 字 点 换行 《浏览 器 保持 味 认 处 理 ) 
break-word ， 在 长 单词 或 URL 地 址 内 加 得 J 换行 。 


定义 文本 自动 换行 。 Chrome 和 Safari 浏 览 器 支持 不 够 支 好 。 取 值 包括 : 
normal: 为 默认 和信， 人 允许 在 字 内 找 行 ; 
rr 韩文 、 日 文 ， 不 外 许字 疡 开 ; 

eak-all ， 与 normal 相 同 ， 苑 训 让 戈 枯 本本 广 本 下 的 任意 字 上 断 开 。 


设置 如 何 处 理 元 素 中 的 空 祝 。 所 有 浏览 器 都 支持 。 取 值 包括 : 
normal， 噶 认 处 理 方式 ; 
pre， 显 示 预 先 税 式 化 的 文本 ， 当 文字 起 出 边界 时 不 换行 


normal ， 蜡 f 认 处 : 理 方式 ; 

pre， 显示 预先 格式 化 的 文本 当 文 字 超 出 边界 时 不 换行 

+ 吉 抽 在 同 “行内 显示 所 有 文本 ， 训 加 并 区 不 辣 的 多余 二 白 ， 直到 文本 结束 或 
re 显示 预先 稿 式 化 的 文本 ， 不 合并 文字 间 的 空白 距 高 ， 当 文字 碰 到 边界 时 


Ee, 保持 文本 的 换行 ， 不 保留 文字 间 的 空白 距 高 ， 当 文字 础 到 边界 对 发 生 换 


i 强制 在 同行 内 显示 所 有 文本 ， 言 并 文本 间 的 多 余 空白 ， 直到 文本 半 束 或 


遭遇 br 对 象 ; 
pe 显示 预先 格式 化 的 文本 ， 不 合并 文字 间 的 空白 距离 ， 当 文字 碰 到 边界 时 
1 
er 保持 文本 的 换行， 不 保留 文字 间 的 空白 距离 ， 当 文字 碰 到 边界 时 发 生 换 
To 





处 理 前 
3.19 ”禁止 表格 标题 文本 换行 显示 


3.3.4 动态 添加 文本 


content 属性 属于 内 容 生 成 和 蔡 换 模块 ， 可 以 为 匹配 的 元 素 动 态 生成 内 容 ， 这 样 台 能 够 满足 在 
CSS 样式 设计 中 临时 添加 非 结构 性 的 样式 服务 标签 ， 或 者 添加 补充 说 明 性 内 容 等 。 
content 属性 的 简明 语法 如 下 o 


content: normal | string | attr() | url() | counter() | none; 


取 值 简单 说 明 如 下 。 

加 ”normal: 默认 值 。 表 现 与 none 值 相同 。 

四 strng: 插入 文本 内 容 。 

四 attr0: 插入 元 素 的 属性 值 。 

回 url0: 插入 一 个 外 部 资源 ， 如 图 像 、 音 频 、 视 频 或 浏览 器 支持 的 其 他 任何 资源 。 
回 计数 器 ， 用 于 插入 排序 标识 。 

四 “none: 无 任何 内 容 。 

会 提示 


: content 属性 早 在 CSS 2.1 中 就 被 引入 ， 可 以 使 用 :before 和 :after 伪 元 素 生成 内 容 。 此 特性 
目前 已 被 大 部 分 的 浏览 器 支持 ， 另 外 Opera 9.5+ 和 Safari 4 已 经 支持 所 有 元 素 的 content 
属性 ， 而 不 仅仅 是 :before 和 :after 伪 元 素 。 


counter(): 


。//* 
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在 CSS 3 Generated Content 工作 草案 中 ，content 属性 添加 了 更 多 的 特征 ， 例 如 ， 插 入 以 及 移 
除 文 档 内 容 的 能 力 ， 可 以 创建 脚注 、 结 语 和 上 段落 注释 。 但 是 目前 还 没有 浏览 器 支持 content 的 扩 


\ 展 功能 。 


【示例 】 本 示例 使 用 content 属性 ， 配 合 CSS 计数 器 设计 多 层 嵌 套 有 序列 表 序 号 设计 ， 代 码 如 


下 。 效 果 如 图 3.20 所 示 。 


<style type= "text/css"> 

ol { list-style:none;} 

li:before {color:#f00; font-family:Times New Roman;} 
li{counter-increment:a 1;} 

li:before {content:counter(a)". ";} 
lili{counter-increment:b 1;} 

li li:before {content:counter(a)"."counter(b)". ";} 
li1ili{counter-increment:c 1;} 


li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";} 


放 清 除 默 认 的 序号 */ 

谍 设 计 层 级 目录 序号 的 字体 样式 */ 
此 设计 递增 函数 a， 递增 起 始 值 为 1*/ 
访 把 递增 值 添加 到 列表 项 前 面 */ 

此 设计 递增 函数 b， 弟 增 起 始 值 为 1*/ 
旋 把 递增 值 添加 到 二 级 列表 项 前 面 */ 
旋 设 计 递增 函数 ce， 递增 起 始 值 为 1*/ 
旋 把 递增 值 添加 到 三 级 列表 项 前 面 */ 


</style> 
<ol> 
<1> 一 级 列表 项 目 1 
<ol> 
<1li> 二 级 列表 项 目 1</l> 
<l> 二 级 列表 项 目 2 
<ol> 
<li> 三 级 列表 项 目 1</li> 
<li> 三 级 列表 项 目 2</li> 
</ol> 
< 路 > 
</ol> 
</> 
<]i> 一 级 列表 项 目 2</li> 
</ol> 


其 
EE http://localhost/m PD 7 Oo 全 列表 结构 X 


1. 一 级 列表 项 目 1 
1.1. 二 级 列表 项 目 1 
1.2. 二 级 列表 项 目 2 


1.2.1. 三 级 列表 项 目 1 
1.2.2. 三 级 列表 项 目 2 
2. 一 级 列表 项 目 2 





图 3.20 使 用 CSS 技巧 设计 多 级 层级 目录 序号 
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3.3.5” 自 定义 字体 类 型 


CSS3 允许 用 户 通过 @font-face 规则 , 加 载 网 络 字 体 文件 ,实现 自 定义 字体 类 型 的 功能 .@font-face 
规则 在 CSS3 规范 中 属于 字体 模块 。 
(@font-face 规则 的 语法 格式 如 下 。 


(@font-face { <font-description> } 


@font-face 规则 的 选择 符 是 固定 的 ， 用 来 引用 网 络 字 体 文件 。<font-description> 是 一 个 属性 名 值 
对 ， 格 式 类 似 如 下 样式 。 





descriptor: value: 
descriptor: value: 
descriptor: value: 


descriptor: value: 


二 


descriptor: value: 


属性 及 其 取 值 说 明 如 下 。 

font-family: 设置 文本 的 字体 名 称 。 

font-style: 设置 文本 样式 。 

font-variant: 设置 文本 是 否 大 小 写 。 

font-weight: 设置 文本 的 粗细 。 

font-stretch: 设置 义 本 是 否 横 同 拉 伸 变形 。 

font-size: 设置 文本 字体 大 小 。 

sre: 设置 自 定 义 字 体 的 相对 路 径 或 者 绝对 路 径 。 注 意 ， 该 属性 只 能 在 @font-face 规则 里 
使 用 。 


和 的 有 生 鲜 甸 的 的 


窑 提示 : 事实 上 , IE 5 已 经 开始 支持 font-face 属性 ， 但 是 只 支持 微软 自 有 的 .eot ( Embedded 
OpenType ) 字体 格式 , 而 其 他 浏览 器 直到 现在 都 不 支持 这 一 字体 格式 。 不过, 从 Safari 
3.1 开始 , 用户 可 以 设置 .ttf( TrueType ) 和 .otf( OpenType ) 两 种 字体 作为 自 定义 字体 。 
考虑 到 浏览 器 的 兼容 性 ， 在 使 用 时 建议 同时 定义 .eot 和 .ttf， 以 便 能 够 兼容 所 有 主流 浏 
览 器 。 
【示例 】 这 是 一 个 简单 的 示例 ， 演 示 如 何 使 用 @font-face 规则 在 页 面 中 使 用 网 络 字 体 。 示 例 代码 
如 下 ， 演 示 效 果 如 图 3.21 所 示 。 


<style type="text/css"> 
让 引入 外 部 字体 文件 郊 
(@font-face { 


。 /9.。 


(sss+DI0 网 页 样式 与 布 局 从 入 门 到 精通 ( 微 神 精 编 上 





/# 选择 默认 的 字体 类 型 */ 

font-family: "lexograph"; 

上 # 兼容 正 */ 

sre: url(http://randsco.com//fonts/lexograph.eot); 

上 # 莱 容 非 IE */ 

src: local("Lexographer"), url(http://randsco.com/fonts/lexograph.ttf) format("truetype"); 





hl 
谍 设置 引入 字体 文件 中 的 lexograph 字体 类 型 */ 
font-family: lexograph, verdana, sans-serif: 
font-size:4em: 
} 

</style> 


<hl>http://www.baidu.com/</h1> 


[7 localhost/mysite/test.ht x WO 
€ CC DD localhost/mysite/test.html 咏 回 三 


HP WL BIAL OU MI 


图 3.21 设置 为 lexograph 字体 类 型 的 文字 





窑 提示 : 谈 入 外 部 字体 需要 考虑 用 户 带 宽 问 题 ， 因 为 一 个 中 文字 体 文 件 小 的 有 几 个 MB， 大 的 有 
十 几 个 MB， 这么 大 的 字体 文件 其 下 载 过 程 会 出 现 延迟 ， 同 时 服务 器 也 不 能 忍受 如 此 频 
繁 的 申请 下 载 。 如 果 只 是 想 让 标题 使 用 特殊 字体 ， 最 好 设计 成 图 片 。 


34 案例 实战 


下 面 结合 案 例 讲解 网 页 字体 样式 和 文本 版 式 设计 ， 同 时 介绍 各 种 网 页 设计 的 技巧 。 
3.4.1 设计 Logo 样式 


本 案例 将 利用 CSS3 自 定义 字体 模拟 百度 公司 Logo 字体 样式 ， 设 计 效 果 如 图 3.22 所 示 。 
百度 Logo 的 字体 样式 :“ 百 度 ” 二 字 是 在 “综艺 体 ” 的 基础 上 稍 加 修改 而 成 , 英文 字体 是 Handel 
Gothic BT 
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门 百度 logo 
CC! | localhost:8080/mysite/index.html 





Bait 汪 百度 





图 3.22 ”模拟 百度 Logo 效果 


【操作 步骤 】 
第 1 步 ， 新 建 HIML 文档 ， 保 存 为 mdex.html。 构 建 简单 的 网 页 结构 ， 其 中 <p> 标 签 中 包含 两 个 
<span> 标 签 和 一 个 <img> 标 签 ， 预 览 效果 如 图 3.23 所 示 。 


> 
<span class="gl">Bai</span> 
<img src="i1mages/baidu.jpg" border="0"> 
<span class="g2"> 百 度 </span> 

</p> 





3.23 ”构建 百度 Logo 示例 的 页 面 结构 


第 2 步 ， 规 划 整 个 页 面 的 基本 显示 属性 ,包括 字体 颜色 、 字 体 基本 类 型 、 网 页 字体 大 小 等 。 
由 于 本 页 面 中 的 字体 颜色 是 一 致 的 ， 所 以 在 <p> 标 签 中 定义 了 网 页 的 字体 颜色 ， 并 让 文本 拓 中 


显示 。 
pi 
color: #eb0005:; 
text-align: center 
} 
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第 3 步 ， 使 用 @font-face 引入 外 部 字体 文件 。 





1 @font-face { 
: font-family: "bai"; 谍 选择 默认 的 字体 类 型 */ 

sTc: url(fonts/Handel.eot): 请 兼容 下 */ 
src: local("bai"), url(fonts/Handel.ttf) format("truetype"); /* 兼容 非 正 */ 

} 

(font-face { 
font-family: "du"; 
src: url(fonts/ 方 正 新 综艺 简体 .eot); 
src: local("du"), url(fonts/ 方 正 新 综艺 简体 .ttf) format("truetype"); 

} 


第 4 步 ， 分 别 设置 两 个 <span> 标 釜 的 样式 。 由 于 在 本 案例 中 ， 既 有 中 文 双 有 西 文 ， 而 中 文 和 西 
文 在 显示 上 兰 别 较 大 ， 所 以 分 别 进行 设置 ， 本 案例 中 对 第 一 个 <span>， 也 就 是 英文 “Bai” 的 样式 设 


置 如 下 。 
.g]1 
font-slize:60px: /# 字体 大 小 */ 
font-family:MS Ui Gothic, Arial,sans-serif: /# 字体 类 型 */ 
letter-spacing: 1px: /# 字 间 距 */ 
font-weight:bold: /# 字体 粗细 */ 
} 


第 5 步 ， 设 置 第 2 个 <span>， 也 就 是 中 文 “ 百 度 ”。 具 体 类 样式 如 下 。 


.521{ 

font-slze:S0PpX: 

font-famlly:MS Ul Gothic, Arial,sans-serif; 

letter-spacing: 1px:; 

font-weight:900: /* 字体 粗细 为 900 */ 
} 


第 6 步 ， 使 用 相对 定位 position: relative: 设 置 中 间 的 图 标 向 下 偏 移 8px， 让 图 像 与 文字 垂直 居中 
对 齐 显 示 。 


p Imsg { position: Telative: top: 8px;} 


3.4.2 ”设计 标题 样式 
本 案例 以 设计 标题 为 例 ， 介 绍 CSS 在 控制 文字 时 的 各 种 技法 ， 效 果 如 图 3.24 所 示 。 
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图 3.24 标题 样式 的 演示 效果 


【操作 步骤 】 

第 1 步 ， 新 建 HIML 文档 ， 保 存 为 index.html。 

第 2 步 ， 构 建 网 页 结构 。 在 本 案例 中 使 用 了 <hl> 标 签 ， 并 加 入 了 <img> 标 签 ， 用 于 插入 图 片 进行 
装饰 。 


<hl><img src="images/tang.png" >《 唐 诗 三 百 首 》</h1> 


第 3 步 ， 定 义 网 页 基本 属性 。 定 义 背景 为 bg.jpg 的 图 片 ， 上 下 左右 的 边界 均 为 20px， 字 体 大 小 
为 16px， 字 体 为 黑体 。 此 时 的 显示 效果 如 图 3.25 所 示 。 


body {/* 页 面 基 本 属性 */ 


margin:20px; /* 边界 */ 
background:url(images/bg.jpe): /* 背景 图 片 */ 
font-size:14px: / 网 页 字体 大 小 */ 


font-family:" 宋 体 ", Arial, Helvetica, sans-serif /# 网 页 字体 默认 类 型 */ 


| |S o/c -solSsmsz > 


《唐诗 三 百 首 》 





图 3.25 定义 网 页 基本 属性 
第 4 步 ， 定 义 标题 样式 。 居 中 显示 ， 字 体 颜色 为 上 86916。 


。 8B3。 
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hl { 
text-align:center: /# 居中 对 齐 */ 


color:#086916: /* 字体 颜色 */ 





此 时 <h1> 标 签 加 入 了 简单 的 CSS 样式 ， 包 括 对 齐 方式 和 字体 颜色 ， 效 果 如 图 3.26 所 示 。 
第 5 步 ， 在 文字 下 面 添 加 一 条 2px 宽 的 灰色 边框 ， 以 增强 效果 ， 并 在 文字 的 下 方 增加 补 白 ， 适 


当 调 整 标题 底 边 界 。 
hl{ 
color:#086916: 
text-align:center:; 
padding-bottom:24px: /# 定义 底 边 界 为 24px*/ 
border-bottom:2px solid #cecaca:; /# 宽 为 2px 的 灰色 下 边框 */ 
} 


此 时 的 效果 如 图 3.27 所 示 。 由 于 <h1> 是 一 个 块 级 元 素 ， 所 以 它 的 边界 不 仅仅 到 文字 ， 而 是 与 页 
面 的 水 平 宽 度 灵 活 地 保持 一 致 。 需 要 特别 指出 的 是 ， 这 种 创建 边框 的 方法 (border-bottom:2px solid 
: #cecaca) 是 一 个 由 3 个 部 分 组 成 的 语句 : 宽度 、 样 式 、 颜 色 。 读 者 可 以 试 着 改变 它们 的 值 ， 看 看 会 
产生 什么 不 同 的 效果 。 


四 -| 个 hapylecaho- ~ S| es 








《唐诗 三 白 首 》 


《唐诗 三 百 首 》 








图 3.26 对 标题 进行 简单 的 CSS 设置 图 3.27 添加 灰色 下 边框 


第 6 步 ， 定 义 <img> 标 签 的 图 片 样式 。 为 了 使 图 片 位 置 下 移 ， 对 图 片 进 行 了 相对 定位 position: 
relative， 并 加 下 移动 24px。 


Img { 
position: relative; 
height:80px; 
bottom: -24px; 

} 
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3.4.3 设计 正文 样式 
本 案例 通过 设置 正文 样式 进一步 介绍 CSS 文字 和 段落 的 排版 方法 ， 效 果 如 图 3.28 所 示 。 








次 唐 诗 欣 赏 


清 B 有 寺 节 雨 纷 份 ， 路 上 行人 欲 断 浙 。 借 jj 酒家 何 处 有 ? 牧童 膛 指 杏 社 村 。 一 一 杜牧 < 清明 》 

宝山 新 雨 后 ， 天 气 晚 未 秋 。 明 月 松 间 照 ， 清 泉 石上 流 。 竹 喧 归 滨 女 ， 莲 动 下 渔舟 。 随 意 春 入 加 , 王 
孙 自 可 留 。 一 一 王 维 《山居 秋 是 久 

楚 母 手中 线 ， 游 子 身上 衣 * 临 行 密 密 绎 ， 意 恐 迟 迟 归 ; 谁 言 寸 草 心 ， 报 得 二 春晖 。 一 一 孟 郊 人 游子 
吟 》 


到 
车 





图 3.28 正文 样式 效果 
【操作 步骤 】 
第 1 步 , 构建 网 页 结构 。 本 案例 中 <h1> 标 签 与 上 例 相 同 ， 同 时 增加 了 3 个 <p> 标 签 ， 添 加 段落 文 
本 。 此 时 显示 效果 仅仅 是 简单 的 文字 和 标题 ， 如 图 3.29 所 示 。 
<hl><img src="images/tang.png" > 唐诗 欣赏 < hl1> 


<p> 清 明 时 节 雨 纷纷 ， 路 上 行人 和 欲 断 魂 。 借 问 酒 家 何 处 有 ? 牧童 遥 指 杏 花 村 。 一 一 杜牧 《清明 》</p> 
<p> 空 山 新 十 后， 天 气 晚 来 秋 。 明 月 松 间 照 ， 清 果 石 上 流 。 竹 喧 归 浣 女 ， 莲 动 下 渔舟 。 随 意 春 芳 敬 ,王孙 


自 可 留 。 一 一 王 维 《 山 大 秋 蜡 》</p> 
<p> 花 母 手 中 线 ， 游 子 身 上 衣 。 临 行 密 密 缝 ， 意 恐 迟 迟 归 ;， 谁 言 寸 草 心 ， 报 得 三 春晖 。 一 一 备 郊 《游子 吟 》 





</p> 
也 -|S hey//ocalhost! ~ BC | 人 sex 
唐诗 欣赏 
清明 时 节 雨 纷纷 ， 足 上 行人 欲 断 魂 。 兴 问 酒 家 何 处 有 ?3 牧童 况 指 吾 花 村 。 一 一 杜 禾 《清明 》 
宝山 新 雨 后 ， 天 气 晚 来 秋 。 明 月 松 间 照 ， 清 岂 石上 流 ， 竹 喀 归 尝 女 ， 莲 动 下 渔 丹 。 随 章 春 芳 软 ， 王 孙 自 可 留 。 于 纵 《山居 秋 旺 I 
慧 母 手 中 线 ， 游 子 身 上 太 。 临 行 密 富 锌 ， 意 了 RaiR 这 归 ， 谁 言 十 草 心 ， 报 得 三 春晖 . 二 元 《游子 难 ; 
图 3.29 未 加 入 CSS 样式 的 网 页 基本 结构 
第 2 步 ， 定 义 网 页 基本 属性 和 标题 属性 ， 与 上 例 基 本 相同 。 
body { 
margin:30pX: /# 边 界 #/ | 
background:url(images/bg jpg): /#* 背景 图 片 */ | 
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font-size:14px: /# 网 页 字体 大 小 */ 
font-family:" 宋 体 ", Arial, Helvetica, sans-serif /六 网 页 字体 默认 类 型 */ 





} 

hl { 
font-family: 隶书 ; font-size: 50px: color: #086916: text-align: center: 
padding-bottom: 24px: border-bottom: 2px solid 大 ecaca: 

} 


Img { position: relative:; height:60px;: bottom: -14px:} 


第 3 步 ， 设 置 正文 样式 ， 即 <p> 标 签 中 的 段落 内 容 。 此 时 <p> 标 签 加 入 了 CSS 样式 ， 包 括 字 体 大 小 、 
字体 颜色 和 行 间距 等 ， 但 是 并 没有 设置 字体 类 型 ， 所 以 <p> 将 会 继承 其 父 级 属性 ， 显 示 为 宋体 。 


pi 
line-height:1.6em: 记 行 间距 */ 
font-size:13px: /# 字 体 大 小 并 
color:#000: 上 字体 颜色 */ 
text-indent:2em: 上 定义 首 行 缩 进 两 个 字符 */ 
margin:0: 诺 四 周 补 白 为 0 */ 

} 


3.4.4 规划 网 页 字体 大 小 


利用 em 和 % 作 为 网 页 字体 大 小 的 单位 ， 可 以 设计 出 一 套 科 学 的 网 页 字体 大 小 方案 。 本 案例 设计 
网 页 字体 大 小 配置 方案 如 下 。 

四 ”网 站 标题 字体 大 小 为 16 像素 。 

四 ”栏目 标题 字体 大 小 为 14 像素 。 

四 “导航 全 单字 体 大 小 为 13 像素 。 

名 ”正文 字体 大 小 为 12 像素 。 

加 ”版 权 、 注 释 信 息 字 体 大 小 为 11 像素 。 

【操作 步骤 】 

第 1 步 ， 新 建文 档 ， 在 <body> 标 签 内 输入 下 面 代码 ， 定 义 网 页 的 HIML 框架 。 





<div 1d="wrap"> 
<div 1d= "header"> 
<hl> 网 站 标题 (<span style="font-size:16px:"> 网 站 标题 -16px</span>) </hl1> 
</div> 
<ul 1d="nav"> 
<]i> 菜 单 〈<span style="font-size:13px:"> 菜 单 -13px</span>) </li> 
</ul> 


<div 1d="main"> 
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<h2> 栏 目标 题 (<span style="font-size:14px:"> 栏 目标 题 -14px</span>) </h2> 
<p> 网 页 正文 《<span style="font-size:12px;"> 网 页 正文 -12px</span>) </p> 
</div> 
<div 1d="footer"> 
<p> 版 权 信息 (<span style="font-size:11px;"> 版 权 信 息 -11px</span>) </p> 
</div> 
</div> 


第 2 步 ， 新 建 内 部 样式 表 ， 定 义 网 页 字体 大 小 ，(12px/16px)X lem = 0.7Sem， 也 就 是 说 初始 化 网 
页 字体 大 小 为 0.75em (相当 于 12px)， 人 代码 如 下 。 


body { 
font-slze:0.7Sem: 


} 


第 3 步 ， 以 body 元 素 的 字体 大 小 为 参考 ， 来 定义 其 他 栏目 或 版 块 的 字体 大 小 。 
加 ”网 站 标题 的 字体 大 小 : (16px/12px)X lem = 1.333em， 也 就 是 说 网 站 标题 的 字体 大 小 是 body 
字体 大 小 的 16/12 倍 ， 即 等 于 1.33em。 
为 什么 不 是 (16px/12px)X0.75em = lem? 因为 body 的 字体 大 小 被 定义 为 0.7Sem。 
根据 CSS 继承 规则 ， 子 元 素 的 字体 大 小 都 是 以 父 元 素 的 字体 大 小 为 lem 作为 参考 来 计算 的 ， 也 
就 是 说 ， 如 果 网 站 标题 定义 为 lem， 而 body 字体 大 小 为 0.75em， 则 网 站 标题 也 应 该 为 0.75em， 即 
等 于 12px， 而 不 是 16px。 
回 “” 栏 目标 题 的 字体 大 小 : (14px/12px)X lem = 1.167em, 也 就 是 说 , 栏目 标题 的 字体 大 小 是 body 
字体 大 小 的 14/12 倍 ， 即 等 于 1.167em。 
回 “导航 菜单 的 字体 大 小 : (13px/12px)X lem = 1.08em, 也 就 是 说 , 栏目 标题 的 字体 大 小 是 body 
字体 大 小 的 13/12 倍 ， 即 等 于 0.812em。 
回 ”正文 的 字体 大 小 : (12px/12px)X lem = lem， 也 就 是 说 ， 正 文 的 字体 大 小 是 body 字体 大 小 
的 1 倍 ， 即 等 于 lem。 
回 ” 版权 、 注 释 信 息 的 字体 大 小 : (11px/12px)X lem = 0.917em， 也 就 是 说 ， 版 权 、 注 释 信 息 的 
字体 大 小 是 body 字体 大 小 的 11/12 倍 ， 即 等 于 0.917em。 
第 4 步 ， 针 对 上 面 的 HIML 结构 ， 定 义 的 CSS 样式 如 下 ， 其 中 正文 字体 直接 继承 body 元 素 的 
字体 大 小 ， 因 此 不 需要 重复 定义 ， 演 示 效 果 如 图 3.30 所 示 。 


<style type= "text/css"> 

body {font-size:0.7Sem;} 

#header hl {ftont-slze:1.333em:} 

#main h2 {ftont-slze:1.167.em:} 

#nav li{font-size:1.08em;} 
#footer p {font-size:0.917em.;} 

</style> 
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DE hi 
网 站 标题 (网 站 标题 -16px) 

*。 菜单 (菜单 -13px) 
栏目 标题 〈 栏 目标 题 -14px ) 


网 页 正文 《网 页 正文 -12px) 
版 权 倍 息 版 权 信 息 -11px) 





图 3.30 在 正 新 版 本 中 预览 网 页 字体 大 小 搭配 效果 


上 面 的 字体 大 小 配置 方案 ， 适 合用 在 嵌 套 层次 比较 浅 的 字体 大 小 继承 中 ， 且 要 注意 相互 的 干扰 
性 。 例如， 如 果 创 建 一 个 样式 ol {font-size:60%:}， 那 么 在 列表 符 套 中 就 会 出 现 严 重 问 题 ， 内 部 的 <ol> 
标签 所 包含 的 字体 会 实际 显示 为 36% (60%X60%)。 所 以 ， 在 使 用 em 为 单位 定义 字体 大 小 时 ， 要 
考虑 网 页 结构 的 层次 问题 ， 原 则 上 不 要 嵌 套 使 用 以 em 为 单位 定义 字体 大 小 超过 两 层 ， 否则 会 为 网 页 
字体 大 小 的 统筹 设计 带 来 很 多 麻烦 。 


3.4.5 设计 居中 显示 


CSS 的 text-align 属性 仅 能 够 作用 于 文本 等 行内 对 象 ， 而 无 法 对 块 元 素 进行 对 齐 操作 。 
【示例 1】 本 示例 的 代码 在 标准 浏览 器 中 是 无 法 居中 显示 的 ， 如 图 3.31 所 示 。 不 过 在 div 元 系 内 
包含 文本 可 以 居中 显示 ， 这 是 因为 text-align 属性 拥有 继承 特性 。 


<style type="text/css"> 
body {text-align:center;} 
div { 
border:solid 1px red: 
width:60%:} 
</style> 
<div><imeg src="1mages/1 .png" /></div> 








邮箱 帐号 


注册 部 箱 
创建 密码 
真 奖 姓名 
性 别 国 男 O 〇 O 女 


这 证 机; 
香 不 甫 接 一 张 ? 


立即 注册 找 好 友 


图 3.31 网 页 默认 对 齐 方式 
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【示例 2】 在 现代 标准 浏览 器 中 ， 可 以 通过 定义 margin 属性 实现 居中 显示 ， 即 定义 其 左右 边 距 都 
为 自动 ， 则 标准 浏览 器 就 会 自动 把 块 状元 素 置 于 居中 的 位 置 ， 代 码 如 下 。 





【提示 】 
当 网 页 嵌 套 层次 比较 深 时 ， 所 设置 的 样式 相互 影响 ， 由 于 对 齐 属性 具有 继承 性 ， 如 果 在 body 元 

素 中 声明 居中 对 齐 text-align:center; )， 则 网 页 内 所 有 文本 都 会 居中 对 齐 。 为 了 避免 类 似 问题 ， 必 须 

在 内 部 声明 向 左 对 齐 进行 纠正 。 | 
【示例 3】 对 于 下 面 这 个 框架 结构 : 





如 果 希 望 网 页 大 中 显示 ， 则 可 以 定义 如 下 样式 来 兼容 不 同类 型 的 浏览 器 。 





虽然 上 面 的 方法 实现 了 网 页 在 不 同类 型 浏览 器 中 的 对 齐 效果 ， 但 是 文本 也 跟着 居中 对 齐 了 , 为 
了 防止 此 问题 的 发 生 ， 可 以 在 #wrap 选择 器 中 补 加 一 条 规则 ， 代 码 如 下 。 





Ge 网 页 样式 与 市 局 从 入 门 到 精通 ( 微 课 精 编 版 ) 





这 样 所 有 问题 都 解决 了 。 如 果 希 望 网 页 内 茶 个 元 素 内 文本 居中 对 齐 ， 则 只 需要 单独 定义 一 个 样 
式 即 可 。 例 如 ， 再 补 加 一 个 样式 声明 标题 文本 居中 对 齐 ， 代 码 如 下 。 


#wrap h2 { 
text-align:center:; 


3.4.6 设计 对 象 垂直 对 齐 


【示例 1】 各 主流 浏览 器 对 vertical-align 的 支持 并 不 统一 。 输 入 下 面 的 代码 ， 会 发 现在 IE 或 
Firefox 等 不 同类 型 浏览 器 中 所 显示 的 效果 都 没有 对 齐 底 部 ， 如 图 3.32 所 示 。 





<style type="text/css"> 
div { 
vertical-align: bottom:; 
width: 12em; 
height: 6em:; 
border: solid 1px red:} 
</style> 
<div> 文 本 垂直 对 齐 </div> 


和 二 一 爸 http://localhost/m PO 7 BO 使 localhost 











图 3.32 无 效 的 垂直 对 齐 底 部 


原来 ，vertical-align 仅 能 够 作用 于 单元 格 或 图 像 显 示 。 因 此 ， 如 果 要 在 上 面 的 样式 内 增加 
display:table-cell; 声 明 ， 则 在 标准 浏览 右 中 能 够 正确 显示 ， 如 图 3.33 所 示 。 


<style type="text/css"> 
dv { 
vertical-align: bottom:; 
display: table-cell: 


width: 12em: 

height: 6em: 

border: solid 1px red: 
} 
<div> 文 本 垂直 对 齐 </div> 
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xX 


¢ EI Cr 








图 3.33 ”垂直 对 齐 底部 显示 





如 果 在 表格 单元 格 标签 内 定义 vertical-align 属性 ， 则 不 同类 型 的 浏览 器 都 能 够 很 好 地 支持 。 
【示例 2】 对 于 下 面 的 垂直 对 齐 样式 ， 正 和 Firefox 等 浏览 器 的 解析 效果 是 相同 的 。 


<style type="text/css"> 

.cell { 
vertical-align: bottom: 
height: 60px; 

} 

</style> 

<table width="200" border="1"> 
< 

<td class="cell"> 文 本 垂直 对 齐 </td> 

</tr> 

</table> 


但 是 在 其 他 元 素 内 ， 正 怪异 模式 就 不 能 够 很 好 地 支持 vertical-align 属性 了 ， 即 使 声明 了 display: 
table-cell: 也 是 如 此 。 为 此 只 能 另辟蹊径 ， 下 面 介 绍 一 下 单行 文本 垂直 居中 对 齐 设 计 技 巧 。 
【示例 3】 单 行文 本 垂直 居中 对 齐 是 经 常 需 要 解决 的 问题 ， 可 以 使 用 下 面 的 方法 巧妙 地 解决 。 


<style type="text/css"> 
div { 
line-height: 6em:; 
width: 12em: 
height: 6em: 
border: solid 1px red:} 
</style> 
<div> 文 本 垂直 居中 对 齐 </div> 


通过 定义 单行 文本 的 高 度 和 行 高 相同 , 就 能 够 间接 地 实现 文本 垂直 居中 显示 的 问题 了 , 如 图 3.34 
所 示 。 当 然 对 于 多 行文 本 来 说 ， 这 种 方法 无 效 。 
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X 
le S m/ecattoum sc 


又 本 垂直 居中 对 齐 





图 3.34 ”单行 文本 垂直 居中 显示 


3.4.7 ”隐藏 和 截取 网 页 文字 


在 页 面 制作 的 过 程 中 ， 经 常会 考虑 如 何 控制 页 面 中 某 个 区 域 的 文字 内 容 的 量 ， 使 其 不 会 因为 内 
容 过 多 而 撑 开 容器 ， te bere 

【示例 】 在 一 个 宽度 为 300px、 高 度 为 54px 的 段落 <p> 标 签 中 有 一 大 段 文字 ， 由 于 文字 过 多 导致 
无 法 正常 显示 在 段落 <p> 标 签 内 ， 代 码 如 下 ， 效 果 如 图 3.35 所 示 。 





<style type="text/css"> 
pi 
width: 300px; 
height: $4px; 
background-color: #EEEEEE:; 
} 
</style> 
<p> 迎 涛 神 ， 此 说 出 自 东 汉 <span>《 曹 娥 碑 》</span>。 曹 娥 是 东汉 上 虞 人 ， 父 亲 溺 于 江 中 ， 数 日 不 见 尸 体 ， 
当时 孝 女 曹 娥 年 仅 十 四 岁 ， 昼 夜 沿江 号 呈 。 过 了 十 七 天 ， 在 五 月 五 日 也 投 江 ， 五 日 后 抱 出 父 尸 。</p> 


Xx 


pe en 草 吉 


在 五 月 五 日 也 投 
YL ， 五 日 后 抱 出 父 己 。 





图 3.35 超出 文档 容器 的 效果 示意 图 


但 根据 CSS 样式 所 定义 的 ， 只 需要 段落 <p> 标 俭 的 高 度 是 54px， 多 余 的 应 该 是 不 需要 的 。 给 段 
落 <p> 标 签 的 样式 加 上 overflow 属性 ， 让 多 余 的 部 分 “消失 ”， 代 码 如 下 。 
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pi 
width:300px: 
height:54px: 
overflow:hidden; /* 隐藏 超出 段落 <p> 标 签 容 器 的 内 容 */ 
backeground-color:#EEEEEE: 
} 


添加 overflow:hidden; 让 超出 段落 <p> 标 签 容 器 的 部 分 在 页 面 中 “消失 ”， 效果 如 图 3.36 所 示 。 


Xx 
¢ /© ET 


迎 涛 神 ， 此 说 出 目 东 汉人 曹 娥 碑 今 。 曹 娥 
是 东汉 上 上 谨 人 ， 父 亲 庄 于 江 中 ， 效 日 不 见 
尸体 ， 当时 全 文革 灶 年 人 二 四 多 ， 恒 夜 沿 





图 3.36 添加 overflow:hidden: 后 段落 <p> 标 签 的 表现 形式 效果 图 


文字 隐藏 的 功能 并 不 仅仅 表现 在 能 解决 页 面 错位 的 问题 上 ， 还 可 以 实现 以 图 代 蔡 文字 显示 在 页 
面 中 。 所 谓 以 图 代 蔡 文字 ， 其 实 就 是 隐藏 文字 ， 然 后 以 背景 图 的 方式 显示 文字 。 这 种 方式 很 常用 ， 
因为 在 设计 页 面 时 经 常会 有 比较 美观 的 被 处 理 过 的 文字 ， 如 图 3.37 所 示 。 


洛 ] 正品 福城 

J ¢ 2 二 免费 退换 
letao.com 

图 3.37 页 面 中 经 过 处 理 的 文字 


经 过 处 理 的 文字 效果 是 用 图 片 在 页 和 面 中 表现 ， 但 又 不 希望 HTML 结构 中 是 使 用 图 片 <img> 标 签 
插入 , 而 是 使 用 <h1> 标 题 标 签 表 明 该 图 片 是 一 个 标题 , 而 且 是 全 文中 权重 值 最 高 的 标题 。 那 么 HIML 
结构 就 会 如 此 编码 : 


<hl> 乐 淘 正 品 鞋 城 </h1> 


在 前 面 已 经 讨论 过 ， 如 果 要 将 文字 隐藏 ， 必 须 将 容器 的 宽 高 固定 ， 并 且 设 置 隐藏 ， 现 在 要 添加 
一 张 图 片 做 背景 ， 设 置 CSS 样式 代码 如 下 ， 效 果 如 图 3.38 所 示 。 





hl { 
width:250px:; 
height:80px; 
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overflow:hidden: 
background:url(1mages/logo.jpg) no-repeat 0 0; 





X 
la S "o/catosu" Pp - So 


人 泗 各 


letao.com 





3.38 ”并 未 “消失 ”的 文字 


既然 已 经 设置 overflow:hidden; 为 什么 文字 还 在 呢 ? 其 实 筷 了 一 件 很 重要 的 事情 ， 那 就 是 只 有 当 
容器 中 的 内 容 超 过 容器 的 宽 高 后 才 会 隐藏 。 

在 分 析 首 行 缩 进 时 ， 曾 学 习 了 如 何 利 用 text-indent 属性 隐藏 文字 。 现 在 就 是 text-indent 发 挥 其 作用 
的 时 候 了 。 修 改 CSS 样式 代码 ， 利 用 text-indent 属性 将 文字 往 劳 边 “ 推 ?” 远 远 地 “ 抛 ” 出 容器 之 外 。 


hl { 
width:250px:; 
height:80px; 
overflow:hidden: 
text-indent:-9999px; /* 利用 text-indent 属性 将 文字 “ 推 ” 到 容器 之 外 */ 
background:url(1mages/logo.jpg) no-repeat 0 0; 
} 


在 浏览 句 中 预 谢 效果 ， 如 图 3.39 所 示 ， 文 字 “ 消 失 ” 了 ， 以 图 代 奉 文字 的 方法 生效 。 





文字 被 “ 推 ”到 了 容器 之 外 


二 “ 淘 EE 


乐 淘 正品 鞋城 | 【ieioocom 





图 3.39 ”文字 “消失 ” (1) 


文字 既然 可 以 左右 移动 很 大 的 数值 导致 其 超出 容器 的 宽度 而 隐藏 ， 那 么 如 果 将 行 高 的 值 设 置 很 
大 并 超出 容器 的 高 度 ， 不 是 也 可 以 隐藏 文字 吗 ? 


。94 。 
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hl { 
width:250px: 
height:80px: 
overflow:hidden: 
line-height:9999px; /* 将 行 高 的 值 设置 很 大 ， 超 出 容器 之 外 ， 使 其 不 可 见 */ 
background:url(1mages/logo.jpg) no-repeat 0 0; 
} 





如 图 3.40 所 示 ， 文 字 因 为 行 高 的 关系 被 “ 推 ”到 了 容 占 之 外 ， 并 隐藏 了 。 


xX 


¢ | ETT ET 


| 
正品 鞋城 | 


免费 退换 | 文字 被 “ 推 ”到 了 容器 





乐 淘 正 品 鞋 城 
图 3.40 文字 “消失 ” (2) 
CSS 样式 对 于 隐藏 文字 的 处 理 不 仅仅 只 有 将 元 素 “ 推 ”出 容器 之 外 这 一 个 方法 ， 还 可 利用 CSS 
样式 本 身 所 具备 隐藏 特性 的 属性 。 
回 visibllity:hidden: 可 设置 元 素 不 可 见 ， 但 会 占据 页 面 中 其 原本 所 应 该 占有 的 空间 位 置 。 
贸 ”display:none; 可 设置 元 素 不 可 见 ， 不 占据 页 面 中 任何 空间 位 置 。 
这 两 种 方式 的 唯一 区 别 就 是 ， 是 否 还 会 在 原 有 的 位 置 上 保留 其 不 可 见 后 的 元 素 空 间 ， 相 同 之 处 
就 是 标签 元 素 内 的 内 容 不 可 见 。 
使 用 这 两 种 方式 都 需要 在 <h1> 标 题 标签 内 多 添加 一 个 标签 ， 这 里 添加 一 个 <span> 标 签 ， 代 码 如 下 。 


<h1><span> 乐 淘 正 品 鞋 城 </span></h1> 


那么 样式 中 首先 需要 设置 <h1l> 标 签 的 宽 高 以 及 背景 图 片 的 属性 ， 其次， 要 对 <h1> 标 题 标 签 内 的 
<span> 标 签 中 的 元 素 设置 不 可 见 ， 代 码 如 下 。 

hl{ 
width:250px:; 
height:80px: 
background:url(1mages/logo.jpg) no-repeat 0 0; 

} 

hl span { 
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visibility:hidden; /* 设置 <span> 标 签 内 的 文字 不 可 见 ， 但 在 页 面 中 占据 其 原本 所 占据 的 空间 */ 


最 终 虽然 文字 “消失 ”了 ， 但 是 在 其 原 有 的 位 置 上 还 是 保留 着 消失 之 前 的 空间 位 置 。 了 解 了 关 
于 使 用 visibility:hidden: 方 法 隐藏 文字 之 后 , 再 看 一 下 使 用 display:none; 隐 藏 文字 后 的 效果 ,代码 如 下 。 


hl { 
width:250px:; 
height:80px:; 
background:url(i1mages/logo.jpg) no-repeat 0 0; 
} 
hl span { 
display:none; /* 设置 <span> 标 签 内 的 文字 不 可 见 ， 并 且 不 会 在 页 面 中 占据 其 空间 */ 
} 


修改 CSS 样式 中 对 <h1> 标 题 标签 所 包含 的 <span> 标 签 的 样式 定义 方式 ， 把 原 有 的 visibility: 
hidden: 隐 藏 文字 方法 改 成 display:none; 的 方法 来 隐藏 文字 。 利 用 Firebug 也 并 无 发 现 隐 藏 后 的 文字 还 
保留 着 其 原 有 的 物理 空间 。 

隐藏 截 取 文字 的 方式 虽然 有 多 种 ,但 并 不 是 任何 时 候 都 是 可 行 的 ， 还 应 根据 实际 的 情况 去 选用 。 
只 有 掌握 了 如 何 使 用 这 些 方法 ， 才 能 够 设计 出 适合 当前 页 面 的 效果 。 


3.4.8 设计 文章 版 式 


本 案例 将 展示 一 个 简单 的 中 文 版 式 : 段落 文本 缩 进 ， 标 题 居中 显示 ， 正 文 之 前 设计 一 个 题 引 ， 
题 引 为 左右 缩 进 的 段落 文本 显示 效果 ， 正 文 以 首 字 下 沉 效 果 显 示 。 演 示 效 果 如 图 3.41 所 示 。 





人 http://localhost/mysite/ ndex.html 
CSS Zen Garden 
CSS 设 计 之 美 
展示 以 Css 技术 为 基础 ， 并 提供 超 强 的 视 苋 冲击 为 。 只 要 选择 列表 中 任意 一 个 样式 表 ， 就 可 以 将 它 加 载 到 本 页 
面 中 ， 并 呈现 不 同 的 设计 效果 。 
下 载 HDL 文档 和 CSS 文件 。 


启蒙 之 路 


同 浏览 器 随意 定义 标 笠 ， 导 致 无 法 相互 菲 容 的 DO 结构， 或 者 提供 缺乏 标准 支持 的 CSSs 等 殖 习 随处 可 见 ， 如 今 当 使 用 这 些 不 
四 设计 之 踏 会 一 中 的 河 。 
现在 ,我 们 必须 清除 以 前 为 了 菲 容 不 同 浏览 器 而 使 用 的 一 些 过 时 的 小 技巧 。 感 谢 W3C、WASP 等 标准 组 织 ， 以 及 浏览 器 | 
家 和 开发 师 们 的 不 情 和 努力 ， 我 们 终于 能 够 进入 Web 设 计 的 标准 时 代 。 
CSS Zen Garden (样式 去 祥 音 花园 ) 邀请 您 发 挥 自 己 的 想象 力 ， 构 思 一 个 专业 级 的 网 页 。 让 我 们 用 合 眼 来 审视 ， 充 满 理 想 和 激情 
去 学 习 CSS 这 个 不 朽 的 技术 ， 最 终局 自己 能 够 达到 技术 和 艺术 舍 而 为 一 的 最 高 境界 。 





图 3.41 报刊 式 中 文 格式 效果 


【操作 步骤 】 
第 1 步 ， 设 计 网 页 结构 。 本 示例 的 HIML 文档 结构 依然 采用 禅 意 花 园 的 结构 ， 截 取 第 一 部 分 的 
结构 和 内 容 ， 并 把 英文 全 部 译 为 中 文 。 
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<div 1d= "intro"> 
<div 1d="pageHeader"> 
<hl><span>CSSZenGarden</span></hl1> 
<h2><span><acronym title="cascading style sheets">CSS</acronym> 设 计 之 美 </span></h2> 
</div> 
<div 1d="quickSummary"> 
<p class="p1"><span> 展 示 以 <acronym 
title="cascading style sheets">CSS</acronym> 技 术 为 基础 ， 并 提供 超 强 的 视觉 冲击 力 。 只 要 选择 列表 中 任意 
一 个 样式 表 ， 就 可 以 将 它 加 载 到 本 页 面 中 ， 并 呈现 不 同 的 设计 效果 。</span></p> 
<p class="p2"><span> 下 载 <atitle=" 这 个 页 面 的 HIML 源 代 码 不 能 够 被 改动 。" 
href="http://www.csszengarden.com/zengarden-sample.html">HTML 文档 </a> 和 <a 
title=" 这 个 页 面 的 CSS 样式 表 文 件 ， 你 可 以 更 改 它 。" 
href="http://www.csszengarden.com/zengarden-sample.css">CSS 文件 </a>。</span></p> 
</div> 
<div 1d="preamble"> 
<h3><span> 启 蒙 之 路 </span></h3> 
<p class="p1"><span> 不 同 浏览 器 随意 定义 标签 ， 导 致 无 法 相互 兼容 的 <acronym 
title="document object model">DOM</acronym> 结 构 ， 或 者 提供 缺乏 标准 支持 的 <acronym 
title="cascading style sheets">CSS</acronym> 等 陋习 随处 可 见 ， 如 今 当 使 用 这 些 不 兼容 的 标签 和 样式 时 ， 设 
计 之 路 会 一 路 坎坷 。</span></p> 
<p class="p2"><span> 现 在 ， 我 们 必须 清除 以 前 为 了 兼容 不 同 浏览 器 而 使 用 的 一 些 过 时 的 小 技巧 。 感 谢 
<acronym 
title="world wide web consortium">W3C</acronym>、<acronym 
title="web standards project">WASP</acronym> 等 标准 组 织 ， 以 及 浏览 器 厂家 和 开发 师 们 的 不 懈 努 力 ， 我 们 
终于 能 够 进入 Web 设计 的 标准 时 代 。</span></p> 
<p class="p3"><span>CSS Zen 
Garden (样式 表 禅 意 花 园 〉 邀请 你 发 挥 自 己 的 想象 力 ， 构 思 一 个 专业 级 的 网 页 。 让 我 们 用 藏 
眼 来 审视 ， 充 满 理想 和 激情 去 学 习 CSS 这 个 不 朽 的 技术 ， 最 终 使 自己 能 够 达到 技术 和 艺术 合 而 为 一 的 最 高 境 
界 。</span></p> 
</div> 
</div> 


第 2 步 ， 定 义 网 页 基本 属性 。 定 义 背 景色 为 白色 ， 字 体 为 黑色 。 多 数 浏览 强 默认 网 页 就 是 这 个 
样式 ， 但 是 考虑 到 部 分 浏览 器 会 以 灰色 背景 显示 ， 显 式 声明 这 些 基本 属性 会 更 加 安全 。 设 置 字 体 大 
小 为 14px， 字 体 为 宋体 。 有 具体 代码 如 下 。 


body {/* 页 面 基本 属性 */ 


background:#fff: /#* 背景 色 */ 
color:#000: /# 前 景色 */ 
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font-size:0.875em: /* 网 页 字体 大 小 */ 
font-family:" 新 宋体 ", Arial, Helvetica, sans-serift 。 /* 网 页 字体 默认 类 型 */ 


A 


第 3 步 ， 定 义 标 题 居 中 显示 ， 适 当 调整 标题 底 边 距 ， 统 一 为 一 个 字 距 。 间 距 设计 的 一 般 规律 : 
字 距 小 于 行距 ， 行 距 小 于 段 距 ， 段 距 小 于 块 距 。 检 查 的 方法 可 以 符 试 将 网 站 的 背景 图 案 和 线条 全 部 
去 反 ， 看 是 否 还 能 保持 想 要 的 区 块 感 。 


hl, h2, h3 {/* 标题 样式 #/ 





text-align:center:; /# 居中 对 齐 */ 
margin-bottom: lem:; 谍 定义 底 边 界 */ 
} 


第 4 步 ， 为 二 级 标题 定义 一 个 下 划 线 ， 并 调 瞳 字体 颜色 ， 目 的 是 使 一 级 标题 、 二 级 标题 和 三 级 
标题 在 同一 个 中 轴线 显示 时 产生 一 个 变化 ， 避 免 单调 。 由 于 三 级 标题 字数 少 〈4 个 汉字 )， 可 以 通过 
适当 调节 字 距 来 设计 一 种 平衡 感 ， 避 免 因 为 字数 太 少 而 使 标题 看 起 来 很 单调 。 


h2 {/* 个 性 化 二 级 标题 样式 */ 


color:#999; /# 字体 颜色 */ 

text-decoration:underline: /# 下 划 线 */ 
h3 {/* 个 性 化 三 级 标题 样式 */ 

letter-spacing:0.4em:; /# 字 距 */ 

font-size: 1.4em: /# 字体 大 小 */ 

} 


第 5 步 ， 定 义 段落 文本 的 样式 。 统 一 清除 段落 间距 为 0， 定 义 行 高 为 1.8 倍 字体 大 小 。 
p {l* 统一 段落 文本 样式 */ 


margin:0: /# 清除 段 距 */ 
line-height:1.8em:; /# 定义 行 高 */ 
} 


第 6 步 ， 定 义 第 一 文本 块 中 的 第 一 段 文本 字体 为 深 灰 色 ， 定 义 第 一 文本 块 中 的 第 二 段 文本 右 对 
齐 ， 定 义 第 一 文本 块 中 的 第 一 段 和 第 二 段 文 本 首 行 缩 进 两 个 字 距 ， 同 时 定义 第 二 文本 块 的 第 一 段 、 
第 二 段 和 第 三 段 文本 首 行 缩 进 两 个 字 距 。 
#quickSummary .pl {/* 第 一 文本 块 的 第 一 段 样式 */ 
color:#444: /* 字体 颜色 所 
} 
#quickSummary .p2 {/* 第 一 文本 块 的 第 二 有 段 样式 */ 
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text-align:Tight: 谍 右 对 齐 */ 
} 

#quickSummary .p1, .p2, .p3 {/* 除了 首 字 下 沉 段 以 外 的 段 样式 */ 
text-indent:2em: 此 首 行 缩 进 */ 
} 





第 7 步 ， 为 第 一 个 文本 块 定 义 左 右 缩 进 样式 ， 设 计 引 题 的 效果 。 
#quickSummary {/* 第 一 文本 块 样式 */ 


margin-left:4em:; /* 左 缩 进 */ 
margin-right:4em: 访 右 缩 进 */ 
} 


第 8 步 , 定义 首 字 下 沉 效果 。CSS 提供 了 一 个 首 字 下 沉 的 属性 : first-letter， 这 是 一 个 伪 对 象 ( 关 
于 伪 、 伪 类 和 伪 对 象 ， 将 在 超 链接 设计 章节 中 进行 详细 讲解 )。 但 是 first-letter 属性 所 设计 的 首 字 下 
沉 效 果 存 在 很 多 问题 ， 所 以 还 需要 进一步 设计 。 例如 ,设置 段落 前 字 浮 动 显 示 (天 于 浮动 请 参阅 CSS 
布局 章节 )， 同 时 定义 字体 大 小 很 大 ， 以 实现 下 沉 效 果 。 为 了 使 首 字 下 沉 效 果 更 明显 ， 这 里 设计 首 字 
加 粗 、 反 日 显示 。 


.first:first-letter {/* 首 字 下 沉 样 式 类 #/ 


font-size:50px: /# 字体 大 小 */ 

float:left: /# 同 左 浮动 显示 */ 

margin-right:6px: 上/# 增加 右 侧 边 距 */ 

padding:2px; 谍 增加 首 字 四 周 的 补 白 */ 

font-weight:bold:; /# 加 粗 字 体 */ 

line-height: lem: 上/# 定义 行距 为 一 个 字体 大 小 ， 避 人 免 行 高 影响 段落 版 式 */ 
background:#000:; /#z 背景 色 */ 

color:#fff: /#* 前 景色 #/ 

} 


注意 ， 由 于 正 早期 版 本 浏览 器 存在 Bug， 无 法 通过 :first-letter 选择 器 来 定义 首 字 下 沉 效 果 ， 故 
这 里 重新 定义 了 一 个 首 字 下 沉 的 样式 类 (first)， 然 后 手动 把 这 个 样式 类 加 入 HIML 文档 结构 对 应 的 
段落 中 。 

<p class="p1l first"><span> 不 同 浏览 器 随意 定义 标签 ， 导 致 无 法 相互 兼容 的 <acronym 

title="document object model">DOM</acronym> 结 构 ， 或 者 提供 缺乏 标准 支持 的 <acronym 

title="cascading style sheets">CSS</acronym> 等 陋习 随处 可 见 ， 如 今 当 使 用 这 些 不 兼容 的 标签 和 样式 时 ， 设 
计 之 路 会 很 坎坷 。</span></p> 
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窑 提示 : 在 阅读 信息 时 ， 段 落 文本 的 呈现 效果 多 以 块 状 存在 。 如 果 说 单个 字 是 点 ， 一 行文 本 为 线 ， 
那么 段落 文本 就 成 面 了 ， 而 面 以 方形 呈现 的 效率 最 高 ， 网 站 的 视觉 设计 大 部 分 其 实 都 是 
在 拼 方块 。 在 页 面 版 式 设计 中 ， 建 议 坚 持 如 下 设计 原则 。 
加 方块 感 越 强 ， 越 能 给 用 户 方 向 感 。 
回 方块 越 少 ， 越 容易 阅读 。 
思 方块 之 间 以 空白 的 形式 进行 分 隔 ， 从 而 组 合 为 一 个 更 大 的 方块 。 
其 他 样式 以 及 整个 案例 效果 请 参阅 本 节 实 例 源 代码 。 


3.5 在 线 练 习 


使 用 CSS 设计 各 种 文本 效果 ， 以 及 各 种 网 页 版 式 和 文本 特效 。 感 兴趣 的 读者 可 以 扫 码 练习 。 
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于 是 


使 用 CSS 美化 图 像 


在 网 页 中 ,可 以 使 用 <img> 标 签 插入 图 像 ， 也 可 以 以 背景 的 形式 显示 图 像 。 但 不 管 使 用 
哪 种 方式 ， 都 需要 使 用 CSS 对 其 进行 美化 。 本 章 将 分 别 介 绍 插 入 图 像 和 背景 图 像 的 样式 ， 
帮助 用 户 设 计 美 观 、 大 和 气 的 页 面 效果 。 


【 学 习 要 点 】 

W|I 设置 插入 图 像 的 样式 。 

| 设计 背景 图 像样 式 。 

BI 灵活 使 用 图 像 美 化 网 页 效果 。 
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4.1 设置 图 像样 式 


HTML5 为 <img> 标 签 定 义 了 多 个 可 选 属性 ， 不 再 推荐 使 用 HIML4 中 部 分 属性 ， 如 align 水平 
对 齐 方式 ) 、border (边框 粗细 ) 、hspace (左右 空白 ) 、vspace (上 下 空白 ) 对 于 这 些 属性 ,HTML5 
建议 使 用 CSS 属性 代替 。 


4.1.1 定义 图 像 大 小 


<img> 标 签 包含 width 和 height 属性 , 使 用 它们 可 以 控制 图 像 的 大 小 。 不 过 CSS 提供 了 更 符合 标 
准 的 width 和 height 属性 ， 使 用 这 两 个 属性 可 以 更 灵活 地 设计 图 像 大 小 。 

【示例 1】 这 是 一 个 简单 地 使 用 CSS 控制 图 像 大 小 的 案例 。 启 动 Dreamweaver， 新 建 网 页 ， 保 存 
为 testl.html， 在 <body> 标 签 内 输入 以 下 代码 。 


<lmg class="w200" src="1mages/]1.jpg" /> 
<lmg class="w200" src="images/2.]pg" /> 
<Ilmg class="w200" src="i1mages/3.jpg" /> 


<Img src="1mages/4.jpg" /> 


在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 以 
类 样式 的 方式 控制 网 页 中 图 片 的 显示 大 小 。 


:W200 { /# 定义 控制 图 像 高 度 的 类 样式 */ 
height:200px; 
} 
显示 效果 如 图 4.1 所 示 ， 可 以 看 到 使 用 CSS 更 方便 控制 图 片 大 小 ， 提 升 了 网 页 设计 的 灵活 性 。 
当 图 像 大 小 取 值 为 百分比 时 ， 浏 览 器 将 根据 图 像 包含 框 的 宽 和 高 进行 计算 。 
【示例 2】 在 这 个 示例 中 ， 统 一 定义 图 像 缩小 50%， 然 后 分 别 放 在 网 页 中 和 一 个 固定 大 小 的 盒子 
中 ， 则 显示 效果 截然 不 同 ， 比 较 效果 如 图 4.2 所 示 。 


<style type="text/css"> 
div {#* 定义 固定 大 小 的 包含 框 */ 


height:200px: /# 固定 高 度 */ 
width:50%; 谍 设计 弹性 宽度 */ 
border:solid 1px red: i dn 
} 

img { /# 定义 图 像 大 小 */ 
width:50%; 上 百分比 宽度 */ 
height:50%%;: /# 百分比 高 度 */ 


0 
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} 
</style> 
<div> <Img src="1mages/4.png" /> </div> 
<Iimg src="images/4.png" /> 
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图 4.1 固定 缩放 图 像 图 4.2 百分比 缩放 图 像 





宅 提示 : 当 仅 为 图 像 定义 宽度 或 高 度 时 ， 则 浏览 器 能 够 自动 调整 纵横 比 ， 使 宽 和 高 能 够 协调 缩放 ， 
避免 图 像 变形 。 但 是 一 旦 同时 为 图 像 定义 宽 和 高 ， 就 要 注意 宽 高 比 ， 否 则 会 失真 。 
4.1.2 ”定义 图 像 边框 


图 像 在 默认 状态 下 是 不 会 显示 边框 的 ,但 在 为 图 像 定义 超 链接 时 会 目 动 显示 2 一 3 像素 宽 的 申 色 
粗 边 框 。 使 用 border 属性 可 以 清除 这 个 边框 ， 代 码 如 下 。 





<a href—="#"><img src="images/login.gif"' alt=" 登 录 " border="0" /></a> 


不 推荐 上 述 用 法 ， 建 议 使 用 CSS 的 border 属性 定义 。CSS 的 border 属性 不 仅 可 以 为 图 像 定 义 边 
框 ， 而 且 提 供 了 丰富 的 边 杠 样式， 支持 定义 边框 的 粗细 、 颜 色 和 样式 。 
【示例 1】 针 对 上 面 的 清除 图 像 边框 效果 ， 使 用 CSS 定义 的 代码 如 下 。 


img { /# 清除 图 像 边框 */ 
border:none: 
} 
使 用 CSS 为 <img> 标 签 定义 无 边 杠 显示， 这样 就 不 再 需要 为 每 个 图 像 定 义 0 边框 的 属性 。 下 面 
分 别 讲解 图 像 边框 的 样式 、 颜 色 和 宽度 的 详细 设置 方法 。 
1. 边框 样式 
CSS 为 元 素 边 框 定义 了 众多 样式 ， 边 框 样式 可 以 使 用 border-style 属性 来 定义 。 边 框 样式 包括 两 
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% 


种 : 虚线 框 和 实 线 框 。 
名” 虚线 框 包括 dotted (点 ) 和 dashed (虚线 )。 


。 【示例 2】 在 本 示例 中 ， 分 别 定义 两 个 不 同 的 点 线 和 虚线 类 样式 ， 然 后 分 别 应 用 到 两 幅 图 像 上 ， 
。 效果 如 图 43 所 示 ， 通 过 比较 可 以 看 到 点 线 和 虚线 的 细微 差异 . 
| <style type="text/css"> 


img {width:250px; margin:12px;} /* 固定 图 像 显示 大 小 */ 
.dotted { /* 点 线 框 样式 类 */ 

border-style:dotted:} 
.dashed { /# 虚线 框 样式 类 */ 

border-style:dashed: 

} 

</style> 
<img class="dotted" src="images/1.png" alt=" 点 线 边 框 " /> 
<img class="dashed" src="images/1.png" alt=" 虚 线 边 框 " /> 
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4.3 正 浏 览 器 中 的 点 线 和 虚线 比较 效果 


回 “” 实 线 框 包括 实 线 框 〈solid)、 双 线 框 (double)、 立 体 止 权 〈groove)、 立 体 凸 槽 (ridge)、 立 
体 上 四边 〈inset) 和 立体 凸 边 〈outset)。 其 中 实 线 框 〈solld) 是 应 用 最 广 的 一 种 边框 样式 。 


全 提示 : 双 线 框 由 两 条 单线 和 中 间 的 空隙 组 成 ， 三 者 宽度 之 和 等 于 边框 的 宽度 。 但 是 ， 双 线 框 的 
值 分 配 也 会 存在 一 些 矛 盾 , 无 法 做 到 平均 分 配 。 如 果 边 框 宽度 为 3px， 则 两 条 单线 与 其 间 
空隙 分 别 为 1px; 如 果 边 框 宽度 为 4px， 则 外 侧 单线 为 2px， 内 侧 和 中 间 空 际 分 别 为 1px; 
如 果 边 框 宽度 为 Spx， 则 两 条 单线 宽度 为 2px， 中 间 空 陈 为 1 px。 其 他 取 值 依 此 类 推 。 


2. 边框 颜色 和 宽度 


使 用 CSS 的 border-color 属性 可 以 定义 边框 的 颜色 ;使 用 border-width 属性 可 以 定义 边框 的 宽度 。 
当 元 素 的 边框 样式 为 none 时 ， 所 定义 的 边框 颜色 和 边框 宽度 都 会 同时 无 效 。 在 默认 状态 下 ， 元 素 的 
边框 样式 为 none， 而 元 素 的 边框 宽度 默认 为 2 一 3px。 
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【示例 3】 在 本 示例 中 快速 定义 图 像 各 边 的 边框 ， 显 示 效 果 如 图 4.4 所 示 。 


<style type="text/css"> ' 

img {/* 图 像 的 边框 样式 */ | 
width:100px: /# 宽度 */ 
border:solid red 150px: /# 统一 定义 各 边 样式 : 实 线 框 、 红 色 、150 像素 宽度 */ | 
border-color:red blue green yellow: /# 顶 边 红 色 、 右 边 蓝 色 、 底 边 绿 色 、 左 边 黄色 */ | 





} 

</style> 

<img src="images/1.png" /> 

【示例 4】 可 以 配合 使 用 不 同 的 复合 属性 自 定义 各 边 样 式 ， 例 如 ， 本 示例 分 别 用 border-style、 
border-color 和 border-width 属性 自 定义 图 像 各 边 边框 样式 ， 演 示 效 果 如 图 4.5 所 示 。 


<style type="text/css"> 
img {/* 图 像 的 边框 样式 */ 
width:300px: /* 宽度 */ 
border-style:solid dashed dotted double: /# 顶 边 实 线 、 右 边 虚 线 、 底 边 点 线 、 左 边 双 线 */ 
border-width:10px 20px 30px 40px: /#* 顶 边 10px、 右 边 20px、 底 边 30px、 左 边 40px */ 
border-color:red blue green yellow: /# 顶 边 红色 、 右 边 蓝 色 、 底 边 绿 色 、 左 边 黄色 */ 
} 
</style> 
<img src="images/1.png" /> 
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如 果 各 边 样式 相同 ， 使 用 border 会 更 方便 设计 。 例 如 ， 下 面 代码 定义 各 边 样式 为 红色 实 线 框 ， 


宽度 为 20 像素 。 
全 | dv { 





width:400px: /# 宽度 */ 
height:200px: /# 高 度 所 
border:solid 20px red: /zx 边框 样式 *#/ 


} 


在 上 面 代码 中 ,border 属性 中 的 3 个 值 分 别 表示 边框 样式 、 边 框 宽度 和 边框 颜色 ,它们 没有 先后 
顺序 ， 可 以 任意 调整 顺序 。 


4.1.3 定义 图 像 不 透明 上 度 


在 CSS3 中 ， 使 用 opacity 属性 可 以 设计 图 像 的 不 透明 度 。 该 属性 的 基本 用 法 如 下 。 





opacity:0~1; 

取 值 范围 为 0~~1， 数 值 越 小 ， 透 明度 越 高 ，0 为 完全 透明 ， 而 1 表示 完全 不 透明 。 

早期 正 浏 览 器 使 用 CSS 滤 镜 定义 透明 度 ， 基 本 用 法 如 下 。 

filter:alpha(opaclty=0~100): 

取 值 范围 为 0 一 100， 数 值 越 小 ， 透 明度 越 高 ，0 为 完全 透明 ，100 表示 完全 不 透明 。 

【示例 】 在 本 示例 中 ， 先 定义 一 个 透明 度 样 式 类 ， 然 后 把 它 应 用 到 一 个 图 像 中 ， 并 与 原 图 进行 比 
较 ， 演 示 效 果 如 图 4.6 所 示 。 


<style type="text/css"> 


Img { width:300px:} 

.opacity {/* 透明 度 样式 类 */ 
opacity: 0.3; /# 标准 用 法 */ 
filter:alpha(opacity=30): /# 兼容 正 早期 版 本 浏览 器 */ 
-moz-opacity:0.3; /* 兼容 Firefox 浏览 器 */ 

} 

</style> 


<img src="images/1.png" title=" 图 像 不 透明 度 " /> 
<img class="opacity" src="images/1.pneg" title=" 图 像 透明 度 为 0.3" /> 


“ 100% 





第 4 章 使 用 CSS 美 化 图 像 $9 


,se ES http://localhost:8080/mysite/testl.html ~ 6 | E localhost 








图 4.6 图 像 透 明度 演示 效果 
4.1.4 ”定义 圆 角 图 像 
CSS3 新 增 了 border-radius 属性 ， 使 用 它 可 以 设计 圆 角 样式 。 该 属性 用 法 如 下 。 





border-radius:none | <length>{1,4} [/ <length>{1,4} ]?; 


border-radius 属性 初始 值 为 none, 适用 于 所 有 元 素 , 除 了 border-collapse 属性 值 为 collapse 的 table 
元 素 。 取 值 简单 说 明 如 下 。 

名 ”none: 默认 值 ， 表 示 元 素 没有 圆 角 。 

四 ”<length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 

为 了 方便 定义 元 素 的 4 个 顶 角 圆 角 ，border-radius 属性 派生 了 以 下 4 个 子 属性 。 

加 ”border-top-right-radius: 定义 右上 角 的 圆 角 。 

回 ”border-bottom-right-radius: 定义 右 下 角 的 圆 角 。 

名” border-bottom-left-radius: 定义 左下 角 的 圆 角 。 

加 “border-top-left-radius: 定义 左上 角 的 圆 角 。 


全 提示: border-radius 属性 可 包含 两 个 参数 值 : 第 1 个 值 表示 圆 角 的 水 平 半径 ,第 2 个 值 表 示 圆 角 
的 垂直 半径 ， 两 个 参数 值 通过 斜 线 分 隔 。 如 果 仅 包 含 1 个 参数 值 ， 则 第 2 个 值 与 第 1 个 
值 相同 ， 它 表示 这 个 角 是 一 个 1/4 圆 角 。 如 果 参 数值 中 包含 0， 则 这 个 角 就 是 托 形 ， 不 会 
显示 为 圆 角 。 


【示例 】 在 本 示例 中 ， 分 别 设 计 两 个 圆 角 类 样式 ， 第 1 个 类 1 为 固定 12 像素 的 圆 角 ， 第 2 个 类 
I2 为 弹性 取 值 50% 的 椭圆 贺 角 ， 然 后 分 别 应 用 到 不 同 的 图 像 上 。 演 示 效 果 如 图 4.7 所 示 。 


<style type="text/css"> 
Img { width:300px;border:solid 1px #eee;} 
I1] { border-radius:12px; } 
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.12 { border-radius:50%;} 
</style> 
全 ] <img class="rl" src="images/1.png" title=" 圆 角 图 像 " /> 
<img class="r2" src="images/1.png" title=" 彬 圆 图 像 " /> 

















图 4.7 圆 角 图 像 演示 效果 
4.1.5 定义 阴影 图 像 
CSS3 新 增 了 box-shadow 属性 ， 该 属性 可 以 定义 阴影 效果 。 该 属性 的 用 法 如 下 。 





box-shadow:none | <shadow> [ , <shadow> |*; 


box-shadow 属性 的 初始 值 是 none， 该 属性 适用 于 所 有 元 素 。 取 值 简单 说 明 如 下 。 

四 “none: 默认 值 ， 表 示 元 素 没 有 阴影 。 

名 ”<shadow>: 该 属性 值 可 以 使 用 公式 表示 为 inset && [ <length>{2,4} && <color>?], 其 中 Inset 
表示 设置 阴影 的 类 型 为 内 阴影 , 默认 为 外 阴影 。<length> 是 由 浮 点 数字 和 单位 标识 符 组 成 的 
长 度 值 ， 可取 正 负 值 ， 用 来 定义 阴影 水 平 偏 移 、 垂 直 偏 移 ， 以 及 阴影 大 小 ( 即 阴影 模糊 度 )、 
阴影 扩展 。<color> 表 示 阴 影 颜色 。 


安 提示 : 当 不 设置 阴影 类 型 时 ， 默 认为 投影 效果 ， 当 设置 为 inset 时 ， 则 阴影 效果 为 内 阴影 。 和 轴 
偏 移 和 Y 轴 偏 移 定 义 阴影 的 偏 移 距离 。 阴 影 大 小 、 阴 影 扩 展 和 阴影 颜色 是 可 选 值 ， 默认 
为 黑色 实 影 。box-shadow 属性 值 必须 设置 阴影 的 偏 移 值 ， 否 则 没有 效果 。 如 果 需 要 定义 
阴影 ， 不 需要 偏 移 ， 此 时 可 以 定义 阴影 偏 移 为 0， 这样 才 可 以 看 到 阴影 效果 。 


【示例 1】 在 本 示例 中 ， 设 计 一 个 阴影 类 样式 ， 定 义 圆 角 、 阴 影 显 示 ， 设 置 圆 角 大 小 为 8 像素 ， 
阴影 显示 在 右 下 角 ， 模 糊 半径 为 14 像素 ， 然 后 分 别 应 用 于 第 二 幅 图 像 上 。 演 示 效 果 如 图 4.8 所 示 。 


<style type="text/css"> 
Img { width:300px:; margin:6px:} 
Tt 
border-radius:8px; 
-moz-box-shadow:8px 8px 14px #06C: /# 兼 容 Gecko 引 警 */ 
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-webkit-box-shadow:8px 8px 14px #06C: /# 兼 容 Webkit 引擎 */ 
box-shadow:8px 8px 14px #06C: 放 标 准 用 法 */ 





} 

</style> 

<img src="images/1.png" title=" 无 阴影 图 像 " /> 

<img class="r1" src="images/1.png" title=" 阴 影 图 像 " /> 














图 4.8 ”阴影 图 像 演示 效果 


【示例 2】box-shadow 属性 用 法 比较 灵活 ， 可 以 设计 车 加 阴影 特效 。 例 如 ， 在 上 面 的 示例 中 ， 修 
改 类 样式 rl 的 代码 如 下 ， 通 过 多 组 参数 值 定义 的 渐变 阴影 效果 如 图 4.9 所 示 。 


Img { width:300px:; margin:6px:} 
I 
border-radius: 1 2px:; 
box-shadow:-10px 0 12px red, 
10px 0 12px blue, 
0 -10px 12px yellow, 
0 10px 12px green:; 








CS 2 localhost 











图 4.9 设计 图 像 多 层 阴 影 效 果 
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会 提示 : 当 设 计 多 个 阴影 时 ， 需 要 注意 书写 顺序 ， 最 先 写 的 阴影 将 显示 在 最 顶层 。 如 在 上 面 这 段 代 


码 中 ， 先 定义 一 个 10px 的 红色 阴影 ， 再 定义 一 个 10px 大 小 、10px 扩展 的 阴影 。 显 示 结 果 
就 是 红色 阴影 层 覆 盖 在 黄色 阴影 层 之 上 ,此 时 如 果 顶 层 的 阴影 太 大 ,就 会 谈 羡 底部 的 阴影 。 


4.2 设计 背景 图 像样 式 





下 面 学 习 如 何 使 用 CSS 设计 背景 图 像 的 显示 样式 。 


4.2.1 定义 背景 图 像 
在 CSS 中 可 以 使 用 background-image 属性 来 定义 背景 图 像 。 有 具体 用 法 如 下 。 





background-1mage: none |<url> 
默认 值 为 none， 表 示 无 背景 图 ; <url> 表 示 使 用 绝对 或 相对 地 址 指定 背景 图 像 。 


会 提示 : GIF 格式 的 图 像 可 以 设计 动画 、 透 明 背 景 等 ， 图 像 小 巧 ， 而 JPG 格式 的 图 像 具 有 更 丰富 
的 颜色 数 ， 图 像 品 质 相 对 要 好 ，PNG 类 型 综合 了 GIF 和 JPG 两 种 图 像 的 优点 。 


【 示例】 如 果 背 景 包 含 透 明 区 域 的 GIF 或 PNG 格式 图 像 ， 则 被 设置 为 背景 图 像 时 ， 这 些 透 明 区 
域 依 然 被 保留 。 在 本 示例 中 ， 先 为 网 页 定义 背景 图 像 ， 然 后 为 段落 文本 定义 透明 的 GIF 背景 图 像 。 
显示 效果 如 图 4.10 所 示 。 


<style type="text/css"> 

html, body, p{ height:100%;} 

body {background-1mage:url(1mages/bg.jpg);} 
p { background-1mage:url(i1mages/ren.png);} 
</style> 

<p></p> 
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4.2.2 ”定义 显示 方式 
CSS 使 用 background-repeat 属性 控制 背景 图 像 的 显示 方式 。 具 体 用 法 如 下 。 
background-repeat: repeat-x | Tepeat-y | [repeat | space | round | no-repeat|{1,2} 


取 值 说 明 如 下 。 
repeat-Xx: 背景 图 像 在 横向 上 平 铺 。 
repeat-y: 背景 图 像 在 纵 各 上 平 铺 。 
repeat: 背景 图 像 在 横向 和 纵 同 平 铺 。 
round: 背景 图 像 自动 缩放 直到 适应 且 填 满 整 个 容器 ， 仅 CSS3 支持 。 
space: 背景 图 像 以 相同 的 间距 平 铺 且 填 满 整个 容器 或 某 个 方向 ， 仅 CSS3 支持 。 
no-repeat: 背景 图 像 不 平 铺 。 

【示例 】 本 示例 设计 了 一 个 公司 公告 栏 ， 其 中 宽度 是 固定 的 ， 但 是 高 度 可 能 会 根据 正文 内 容 进 行 
动态 调整 ， 为 了 适应 这 种 设计 需要 ， 不 妨 利用 垂直 平 铺 来 进行 设计 。 

第 1 步 , 把 “公司 公告 栏目 分 隔 为 上 、 中、 下 3 块 , 设计 <div id="call_tit"> 和 <div id="call btm"> 
为 固定 高 度 ， 而 中 间 块 <div id="call mid"> 可 以 随时 调整 高 度 。 设 计 的 结构 如 下 。 





和 多 的 全 的 的 


<div 1d="call"> 
<div id="call tit"> 公 司 公告 </div > 
<div id="call mid"></div > 
<div id="call btm"></div > 
</div> 


第 2 步 ， 所 实现 的 样式 表 如 下 ， 最 后 调整 中 间 块 元 素 的 高 度 ， 以 形成 不 同 高 度 的 公告 牌 ， 演 
效果 如 图 4.11 所 示 。 


引 | 


<style type="text/css"> 


#call { 
width:218px: /# 固定 宽度 */ 
font-size: 14px: /# 字体 大 小 */ 

} 

#call tit { 
background:url(images/call top.gif): /* 头 部 背景 图 像 */ 
background-repeat:no-repeat; /# 不 平 铺 显 示 */ 
height:43px: /# 固定 高 度 ， 与 背景 图 像 高 度 一 致 */ 
color:#fff: /# 白色 标题 */ 
font-weight:bold: /# 粗 体 */ 
text-align:center: /# 居中 显示 */ 
line-height:43px: /* 标题 垂直 居中 */ 

} 
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本 
background-image:url(images/call mid.gifb: ”/* 背景 图 像 */ 
background-repeat:repeat-y: /* 垂直 平 铺 */ 
height: 160px: 谍 可 自由 设置 的 高 度 */ 
} 
Pt 
background-image:url(images/call btm.gifj; ”/* 底部 背景 图 像 */ 
background-repeat:no-repeat: /# 不 平 铺 显 示 */ 
height:1 1px: /# 固定 高 度 ， 与 背景 图 像 高 度 一 致 */ 
} 
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设置 不 同 高 度 的 栏目 效果 比较 


图 4.11 背景 图 像 垂 直 平 铺 示 例 模拟 效果 


4.2.3 定义 显示 位 置 


在 默认 情况 下 ， 背 景 图 像 显 示 在 元 素 的 左上 角 ， 并 根据 不 同方 式 执行 不 同 的 显示 效果 。 为 了 更 
好 地 控制 背景 图 像 的 显示 位 置 ，CSS 定义 了 background-position 属性 来 精确 定位 背景 图 像 。 

background-position 属性 取 值 包括 两 个 值 ， 分 别 用 来 定位 背景 图 像 的 x 轴 、y 轴 坐 标 ， 取 值 单位 
没有 限制 。 具 体 用 法 如 下 。 





background-position: [ left | center | right | top | bottom | <percentage> | <length> | | [ left | center | right | 
<percentage> | <length> | [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right | [ <percentage> | 
<length> J]? ] && [ center | [ top | bottom | [ <percentage> | <length> ]? ] 


默认 值 为 0% 0%， 等 效 于 left top。 
【示例 】 本 示例 利用 4 个 背景 图 像 拼 接 起 来 组 成 一 个 栏目 版 块 ， 这 些 背 景 图 像 分 别 被 定位 到 栏目 
的 4 条 边 上 ， 形 成 一 个 圆 角 和 矩形， 并 富有 立体 感 ， 效 果 如 图 4.12 所 示 。 
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区 明 区 域 So What is This About? 
tot. p- 30] n 


Ny ~ So Whatis This About? 
, 于 网 页 设计 师 来 说 应 该 好 好 研究 CSS。Zen 
六 Garden 私 力 于 推广 和 使 用 CSS 技 术 ， 贺 力 激 发 和 
鼓励 您 的 灵感 和 参与。 该 者 可 以 从 浏览 高 手 的 设 
计 作 品 入 门 。 吕 要 选择 列表 中 的 任 一 个 样式 表 ， 就 可 以 将 它 加 载 到 这 个 页 面 





中 。 HTML 文档 结构 始终 不 变 ， 但 是 读者 可 以 自由 地 修改 和 定义 CSS 样 式 素 < 


CSS 有 具有 强大 的 功能 ， 可 以 自由 控制 8HTML 结 构 。 当 然 读者 需要 把 右 
Css 技 术 的 能 力 和 创意 的 灵感 ， 同 时 亲 白 动手 ， ease 生 直 平 负 
展示 个 大 的 才华 。 截 至 目前 为 止 ， 很 多 Web 设 计 师 和 程序 员 已 经 介绍 
| Css 应 用 技巧 和 兼容 技术 的 各 种 技巧 和 案例 。 而 平面 设计 师 还 没有 足够 重视 CSS 
的 潜力 。 读者 是 不 是 需要 从 现在 随 W6 呢 ? 


和 


So What is 





图 4.12 背景 图 像 定 位 综合 应 用 
示例 所 用 到 的 HTML 结构 代码 如 下 。 


<div 1d="explanation"> 
<h3><span> 这 是 什么 ? </span></h3> 
<p class="p1"><span><span class="first"> 对 </span> 于 网 页 设计 师 来 说 应 该 好 好 研究 <acronym 
title="cascading style sheets">CSS</acronym> 。Zen Garden 致力 于 推广 和 使 用 CSS 技术 ， 努 力 激 发 和 鼓励 您 的 灵 
感 和 参与 。 读 者 可 以 从 浏览 高 手 的 设计 作品 入 门 。 只 要 选择 列表 中 的 任 一 个 样式 表 ， 就 可 以 将 它 加 载 到 这 个 页 
面 中 。<acronym title="hypertext markup language">HTML</acronym> 文 档 结 构 始 终 不 变 ， 但 是 读者 可 以 自由 地 
修改 和 定义 <acronym title="cascading style sheets">CSS</acronym> 样 式 表 。</span></p> 
<p class="p2"><span><acronym title="cascading style sheets">CSS</acronym> 具 有 强大 的 功能 ， 可 以 自 
由 控制 HTML 结构 。 当 然 读 者 需要 拥有 驾驭 CSS 技术 的 能 力 和 创意 的 灵感 ， 同 时 亲自 动手 ， 用 有 具体 的 实例 展示 
CSS 的 魅力 ， 展 示 个 人 的 才华 。 截 至 日 前 ， 很 多 Web 设计 师 和 程序 员 已 经 介绍 过 许多 关于 CSS 应 用 技巧 和 兼 
容 技术 的 各 种 技巧 和 案例 。 而 平面 设计 师 还 没有 足够 重视 CSS 的 潜力 。 读 者 是 不 是 需要 从 现在 开始 呢 ? 
</span></p> 
</div> 


根据 这 个 HTML 结构 所 设计 的 CSS 样式 表 如 下 ， 请 注意 背景 图 像 的 定位 方法 。 


<STYLE type=“‘text/css”> 
body { # 定义 网 页 背景 色 、 居 中 显示 、 字 体 颜色 */ 
background:#DFDFDF: text-align:center: color:#454545:; 


} 

Pp; h3 { margin:0; padding:0; } 上 # 清除 段落 和 标题 的 默认 边 距 */ 

#explanation { 
background-color:#ffFFFfF: 人/# 白色 背景 ， 填 充 所 有 区 域 */ 
background-image:url(images/img explanation.jpe); /# 指定 背景 图 像 */ 
background-position:left bottom: 谍 定位 背景 图 像 位 于 左下 角 */ 


“Rs 


C (sss+DN 网 页 样式 与 布 局 从 入 门 到 精通 ( 微 课 精 编 版 ) 





backeground-repeat:repeat-y: /# 在 垂直 方向 上 平 铺 背 景 图 像 */ 
width:546px: /# 固定 栏目 宽度 */ 

1 margin:0 auto: /# 栏目 居中 显示 */ 
: font-size:13px; line-height:1.6em:; text-indent:2em:; /# 定义 栏目 内 字体 属性 */ 





#explanation h3 { 
background:url(images/title explanation.gif) no-repeat; 。”/* 顶部 背景 图 像 ， 不 平 铺 */ 


height:39px: /# 固定 标题 栏 高 度 */ 

} 

#explanation h3 span { display:none: } /# 隐藏 标题 栏 内 信息 */ 

#explanationp { /# 定义 右 侧 背景 图 像 ， 垂 直 平 铺 */ 

background:url(i1mages/right bg.gif) right Tepeat-y: 
} 

#explanation .p2 span { /# 底部 背景 图 像 ， 不 平 铺 */ 
padding-bottom:20px: 谍 增加 第 2 段 底部 内 边 距 ， 显 示 背 景 图 像 */ 
background:url(1mages/right bottom.agif) bottom no-repeat; 

} 

#explanation p span {/* 定义 段落 文本 左 侧 的 内 边 距 ， 以 便 显示 左 侧 背 景 图像 */ 
padding:0 1Spx 10px 77px; 
display:block: 人/# 定义 块 状 显示 ， 内 边 距 才 有 效 */ 
text-align:left; 再 太太 站 出 天 3/ 

} 

#explanation p .first {/* 定义 首 字 下 沉 特 效 */ 
font-size:60px: color:#820015: line-height: lem:; /# 字体 显示 属性 */ 
float:left: 此 回 左 浮动 */ 
padding:0; 上 # 清除 上 面 样式 为 段落 定义 的 内 边 距 */ 

} 

“STYLE> 


在 上 面 的 样式 表 中 ， 分 别 为 不 同 元 素 定 义 背 景 图 像 ， 然 后 通过 定位 技术 把 背景 图 像 定 位 到 对 应 
的 4 条 边 上 ， 并 根据 需要 运用 平 铺 技术 实现 圆 角 区 域 效果 。 
< 八 注 意 : 百分比 是 最 灵活 的 定位 方式 ， 同 时 也 是 最 难 把 握 的 定位 单位 。 

在 默认 状态 下 ， 定 位 的 位 置 为 0% 0%)， 定 位 点 是 背景 图 像 的 左上 顶点 ， 定 位 距离 是 该 点 到 包 
含 框 左上 角 顶 点 的 距离 ， 即 两 点 重合 。 

如 果 定 位 背景 图 像 为 (100% 100%)， 定 位 点 是 背景 图 像 的 右 下 顶点 ， 定 位 距离 是 该 点 到 包含 框 
左上 角 顶 点 的 距离 ， 这 个 距离 等 于 包含 框 的 宽度 和 高 度 。 

百分比 也 可 以 取 负 值 ， 负 值 的 定位 点 是 包含 框 的 左上 顶点 ， 而 定位 距离 则 由 图 像 自身 的 宽 和 高 
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来 决定 。 


CSS 还 提供 了 5 个 关键 字 : left、right、center、top 和 bottom。 这 些 关 键 字 实际 上 就 是 百分比 特 


殊 值 的 一 种 固定 用 法 。 详 细 列 表 说 明 如 下 。 


/请 普通 用 法 */ 

top left、left top = 0% 0% 
right top、 top right = 100% 0% 
bottom left、left bottom = 0% 100% 
bottom right、right bottom = 100% 100% 
诺 居中 用 法 */ 

center 、center center = $0% $0% 
/# 特殊 用 法 */ 

top、top center、center top = $0% 0% 
left、left center、center left = 0% S50% 
right、 right center、center right =]100% 50% 
bottom、bottom center、center bottom = $0% 100% 


4.2.4 定义 固定 背景 


在 默认 情况 下 ， 背 景 图 像 能 够 跟随 网 页 内 容 上 下 深 动 。 可 以 使 用 background-attachment 属性 定 
义 背 景 图 像 在 窗口 内 固定 显示 ， 有 具体 用 法 如 下 。 


background-attachment: fixed | local | scroll 


默认 值 为 scroll， 有 具体 取 值 说 明 如 下 。 

四 fixed: 背景 图 像 相对 于 浏览 器 窗 体 固 定 。 

MM ”local: 背景 图 像 相对 于 元 素 内 容 固定 ， 也 就 是 说 当 元 素 内 容 滚 动 时 ， 背 景 图 像 也 会 跟着 滚 
动 ， 此 时 不 管 元 素 本 喘 是 否 滚动 ， 当 元 素 显 示 滚 动 条 时 才 会 看 到 效果 。 该 属性 值 仅 CSS3 
文 持 。 

加 scroll: 背景 图 像 相 对 于 元 素 固 定 ， 也 就 是 说 当 元 素 内 容 深 动 时 ， 背 景 图 像 不 会 跟着 滚动 ， 
因为 背景 图 像 总 是 要 跟着 元 素 本 喘 。 

【示例 】 在 本 示例 中 ， 为 <body> 标 签 设 置 背景 图 片 ， 且 不 平 铺 、 固 定 ， 这 时 通过 拖 动 浏览 器 滚动 

和 条， 可 以 看 到 网 页 内 容 在 滚动 ， 而 背景 图 片 固定 显示 。 


<style type="text/css"> 


body { 
background-image: url(images/bg.jpg): /* 设置 背景 图 片 */ 
background-repeat: no-repeat: /* 背景 图 片 不 平 铺 */ 
background-position: left center: /# 背景 图 片 的 位 置 */ 
background-attachment: fixed: /# 背景 图 片 固 定 ， 不 随 滚动 条 滚动 而 滚动 */ 


和 
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height: 1200px; 
#box {float:right:; width:400px:} 
</style> 
<div 1d="box"> 
<hl> 雨 蔡 </h1> 
<h2> 戴 望 舒 <h2> 
<pre> 
撑 着 油纸 爹 ， 独 自 
仿 香 在 悠长 、 悠 长 
又 彼 寥 的 雨 巷 ， 
我 希望 逢 着 
一 个 丁香 一 样 的 
结 着 悉 怨 的 姑娘 。 


< 他 地 http://localhost/mysite/test.htm 


4.2.5 定义 原点 








/# 高 度 ， 出 现 浏览 器 的 滚动 条 */ 


及 旦 0 ee 大 国定 背 最 图 片 及 尾 性 缩写 


她 入 特 在 让 容 的 雨 营 ， 
择 看 油纸 证 
像 拒 一 样 ， 


像 梦 一 般 地 ， 
像 梦 一 般 地 凄 婉 迷茫 。 
像 楚 中 己 过 


国信 
ip 


图 4.13 背景 图 片 固定 





background-origin 属性 定义 background-position 属性 的 定位 原点 。 在 默认 情况 下 ， 


background-position 属性 总 是 以 元 素 左 上 角 为 坐标 原点 定位 背景 图 像 。 使 用 background-origin 属性 可 
以 改变 这 种 定位 方式 。 该 属性 的 基本 语法 如 下 。 


background-origin:border-box | padding-box | content-box; 


110 


第 4 章 使 用 CSS 美 化 图 傣 





取 值 简单 说 明 如 下 。 
四 “border-box: 从 边框 区 域 开始 显示 背景 。 | 
回 “padding-box， 从 补 白 区 域 开始 显示 背景 ， 为 默认 值 。 . 


回 ”content-box: 仅 在 内 容 区 域 显 示 背 景 。 

【示例 】background-origin 属性 改善 了 背景 图 像 定 位 的 方式 ， 更 灵活 地 决定 背景 图 像 应 该 显示 的 ET 
位 置 。 本 示例 利用 background-origin 属性 重 设 背景 图 像 的 定位 坐标 ， 以 便 更 好 地 控制 背景 图 像 的 显 
示 ， 演 示 效 果 如 图 4.14 所 示 。 








念 奴 娇 "赤壁 怀古 


分 饶 





TT: 尽 ， 和 于 古风 流 人 物 。 故 垒 西 边 ， 人 道 是 ， 三 国 周 郎 赤 整 。 乱 石 
雪 。 江山 如 画 ， 一 时 多 少 要 杰 。 


通 想 公 瑾 当年 ， 小 和 弄 初 嫁 了 ， 座 姿 英 发 。 羽 扁 纶 巾 ， 谈 笑 则 ， 槟 届 灰 飞 烟 天 六 


生 华发 。 人 生 如 梦 ， 一 苯 于 酷 江 月 。 








a 


图 4.14 设计 诗词 效果 








示例 代码 如 下 。 


<style type="text/css"> 
div { 尺 定 义 包含 框 的 样式 */ 
height: 322px; 
width: 780px: 
border: solid 1px red; 
padding: 250px 4em 0; 
证 为 了 避免 背景 图 像 重 复 平 铺 到 边框 区 域 ， 应 禁止 它 平 铺 */ 
background:url(1mages/p3.jpg) no-repeat; 
席 设 计 背 景 图像 的 定位 坐标 点 为 元 素 边 框 的 左上 角 */ 


background-origin:border-box; 
放 将 背景 图 像 等 比 缩放 到 完全 覆盖 包含 框 ， 背 景 图 像 有 可 能 超出 包含 框 */ 
background-size:cover; 
overflow:hidden: 访 隐 藏 超出 包含 框 的 内 容 */ 
} 
divhl, div h2{/* 定 义 标题 样式 */ 
font-size:18px: font-family:" 幼 圆 "; 
text-align:center: /# 水 平 居中 显示 所 


本 


Ea 网 页 样式 与 布局 从 入 门 到 精通 ( 微 课 精 编 版 ) 








E29 
2 
| } 
| divp {定义 正文 样式 */ 
| text-indent:2em:; 此 首 行 缩 进 两 个 字符 */ 
line-height:2em: /# 增 大 行 高 ， 让 正文 看 起 来 更 疏 朗 妆 
margin-bottom:2em:; 诺 调 整 底部 边界 ， 增 大 上 段落 文本 距离 */ 
} 
</style> 
<div> 
<hl> 念 奴 娇 &#8226; 赤 壁 怀古 </h1> 
<h2> 苏 轼 </h2> 


<p> 大 江东 去 ， 浪 淘 尽 ， 干 古风 流 人 物 。 故 垒 西 边 ， 人 道 是 ， 三 国 周 郎 赤壁 。 乱 石 穿 空 ， 惊 涛 拍 岸 ， 
卷 起 和 干 堆 雪 。 江 山 如 画 ， 一 时 多 少 蚂 杰 。</p> 
<p> 遥 想 公 瑾 当年 ， 小 乔 初 嫁 了 ， 梭 姿 英 发 。 羽 扇 纶 巾 ， 谈 笑 间 ， 档 榴 灰 飞 烟 灭 。 故 国 神游 ， 多 情 应 
笑 我 ， 早 生 华 发 。 人 生 如 梦 ， 一 尊 还 栈 江 月 。</p> 
</div> 


4.2.6 ”定义 裁剪 区 域 


background-clip 属性 定义 背景 图 像 的 裁剪 区 域 。 该 属性 的 基本 语法 如 下 。 





background-clip:border-box | padding-box | content-box | text: 


取 值 简单 说 明 如 下 。 
四 ”borderbox: 从 边框 区 域 问 外 裁剪 背景 ， 为 默认 值 。 
四 ”padding-box: 从 补 白 区 域 癌 外 裁剪 背景 。 
加 ”content-box: 从 内 容 区 域 问 外 裁剪 背景 。 
四 text: 从 前 景 内 容 〈 如 文字 ) 区 域 癌 外 裁剪 背景 。 
浴 提示 : 如 果 取 值 为 padding-box， 则 background-image 将 忽略 补 白 边缘 ， 此 时 边框 区 域 显示 为 
透明 ; 


如 果 取 值 为 border-box， 则 background-image 将 包括 边框 区 域 ; 

如 果 取 值 为 content-box， 则 background-image 将 只 包含 内 容 区 域 ; 

如 果 background-image 属性 定义 了 多 重 背 景 , 则 background-clip 属性 值 可 以 设置 多 个 值 ， 
并 用 过 号 分 隔 。 


如 果 background-clip 属性 值 为 padding-box,background-origin 属性 值 为 border-box, 上 且 background- 
position 属性 值 为 "top left" (默认 初始 值 )， 则 背景 图 左上 角 将 会 被 截取 掉 部 分 。 


“1 





第 后 章 使 用 CSS 美 化 图 像 5 


【示例 1】 本 示例 演示 了 如 何 设计 背景 图 像 仅 在 内 容 区 域内 显示 ， 演 示 效 果 如 图 4.15 所 示 。 





<style type="text/css"> 

dv { 
height: 1 5Opx:; 
width:300px:; 
border:solid SO0px gray; 
padding:50px; 


background:url(1mages/bg.jpg) no-Tepeat': 
# 将 背景 图 像 等 比 缩放 到 完全 履 盖 包含 框 ， 背 景 图 像 有 可 能 超出 包含 框 状 
background-size:cover:; 
证 将 背景 图 像 从 content 区 域 开 始 向 外 裁剪 背景 所 
background-clip:content-box;: 

} 

</style> 


<div></div> 


Xx 


< » [EEE ETT ”> 





图 4.15 ”以 内 容 边 缘 裁 切 背 景 图 像 效 果 


【示例 2】 本 示例 同时 定义 background-clip 和 background-origin 属性 值 为 content， 可 以 设计 比较 
特殊 的 按钮 样式 ， 演 示 效 果 如 图 4.16 所 示 。 


<style type="text/css"> 

button { 
height:40px: 诗 固 定 包 含 框 大 小 */ 
WwWldth:1S0px: 
padding:1px: /# 在 内 容 区 留 点 空隙 关 


I 
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cursor:pointer; 话 定 义 手 形 指针 样式 */ 
color:#fff: /# 白 色 字 体 #/ 

谍 设 计 立 体 边框 样式 */ 

border:3px double #95071b: 

border-right-color:#650513:; 

border-bottom-color:#650513: 

/# 为 了 避免 背景 图 像 重 复 平 铺 到 边框 区 域 ， 应 禁止 它 平 铺 */ 
backsround:url(masges/Img6.]pg) no-repeat; 

席 设 计 背 景 图 像 的 定位 坐标 点 为 元 素 内 容 区 域 的 左上 角 */ 





background-origin:content-box; 
席 设 计 以 内 容 区 域 的 边缘 来 裁 切 背景 图 像 */ 
background-clip:content-box:; 

} 

</style> 


<button> 导 航 按钮 >></button> 


Ee sa SE http://localhost/m 只- BC | Elocalhost 





\ 图 4.16 设计 按钮 效 琳 
“4.2.7 定义 大 小 
background-size 可 以 控制 背景 图 像 的 显示 大 小 。 该 属性 的 基本 语法 如 下 。 





background-size: [ <length> | <percentage> | auto |{1,2} | cover | contain:; 


取 值 简单 说 明 如 下 。 

名 ”<length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 不 可 为 负 值 。 

加 ”<percentage>: 取 值 范围 为 0 一 100%。 不 可 为 负 值 。 

四 ”cover: 保持 背景 图 像 本 身 的 宽 高 比例 ， 将 图 片 缩放 到 正好 完全 履 盖 所 定义 背景 的 区 域 。 

四 contain: 保持 图 像 本 身 的 宽 高 比例 ,将 图 片 缩放 到 宽度 或 高 度 正 好 适应 所 定义 背景 的 区 域 。 

background-size 属性 初始 值 为 aato。 可 以 设置 1 个 或 2 个 值 ，1 个 为 必 填 ，1 个 为 可 选 。 其 中 第 
1 个 值 用 于 指定 背景 图 像 的 width， 第 2 个 值 用 于 指定 背景 图 像 的 height， 如 果 只 设置 1 个 值 ， 则 第 2 
个 值 默 认为 auto。 

【示例 】 设 计 自 适应 模块 大 小 的 背景 图 像 。 借 助 image-size 属性 自由 定制 背景 图 像 大 小 的 功能 ， 
让 背景 图 像 自 适应 盒子 的 大 小 , 从 而 可 以 设计 与 模块 大 小 完全 适应 的 背景 图 像 , 本 示例 效果 如 图 4.17 
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所 示 ， 只 要 背景 图 像 长 宽 比 与 元 素 长 宽 比 相同 ， 就 不 用 担心 背景 图 像 脱节 。 





图 4.17 设计 背景 图 像 自 适应 显示 


示例 完整 代码 如 下 。 


<style type="text/css"> 

dv { 
margin:2px; 
float:left:; 
border:solid 1px red; 
background:url(images/img2.]Jpg) no-repeat center; 
此 设计 背景 图 像 完全 徐 亲 元 素 区 域 */ 
background-size:cover:; 

} 

谍 设 计 元 素 大 小 */ 

.hl { height:120px; width:192px; } 

.h2 { helght:240px: width:384px;: } 

</style> 

<div class="h1"></div> 

<div class="h2"></div> 


4.2.8 定义 多 背景 


CSS3 中 可 以 在 一 个 元 素 里 显示 多 个 背景 图 像 ， 还 可 以 将 多 个 背景 图 像 进行 重 登 显 示 ， 从 而 使 得 
背景 图 像 中 所 用 素材 的 调整 变 得 更 加 容易 。 

【示例 】 本 示例 将 用 到 8 个 背景 图 像 ， 使 用 它们 分 别 模拟 圆 角 边框 的 4 个 项 角 和 4 条 边 。 最 后 通 
过 CSS 把 它们 分 别 固定 到 元 条 的 边框 和 顶 角 上 ， 设 计 效 果 如 图 4.18 所 示 。 





<style type="text/css"> 
body { text-align: center; } 


.Toundbox { 


A A 
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感 和 参与 。 您 可 以 从 浏览 高 手 的 设计 作品 入 门 。 只 要 选择 列表 中 的 任 一 个 样式 表 ， 就 可 以 将 它 加 载 到 这 个 页 面 
中 。<acronym title="hypertext markup language">HTML</acronym> 文 档 结构 始终 不 变 ， 但 是 您 可 以 自由 地 修改 
和 定义 <acronym title="cascading style sheets">CSS</acronym> 样 式 表 。 </span></p> 


</div> | 





XX 
ee 





4.18 定义 多 背景 图 像 
43 定义 渐变 背景 样式 


基于 CSS3 的 渐变 背景 与 渐变 图 片 相 比 ， 最 大 的 优点 是 便于 修改 ， 同 时 文 持 无 级 缩放 ， 过 渡 更 加 
自然 。CSS3 支持 线性 渐变 和 径 同 渐变 ， 下 面 分 别 进行 介绍 。 


4.3.1 线性 渐变 
创建 线性 渐变 ， 至 少 需 要 两 种 颜色 ， 可 选择 设置 一 个 起 点 或 一 个 方 回 。 简 明 语 法 格式 如 下 。 





linear-gradient( angle, color-stop1l, color-stop2, ...) 


参数 简单 说 明 如 下 。 

四 angle: 用 来 指定 渐变 的 方向 ， 可 以 使 用 角度 或 者 关键 字 来 设置 。 关 键 字 包括 4 个 ， 说 明 
如 下 。 

to left: 设置 渐变 从 右 到 左 ， 相 当 于 270deg。 

to right: 设置 渐变 从 左 到 右 ， 相 当 于 90deg 

to top: 设置 渐变 从 下 到 上 ， 相 当 于 0deg 

to bottom: 设置 渐变 从 上 到 下 ， 相 当 于 180deg。 该 值 为 默认 值 。 


全 ”提示 : 如 果 创建 对 角 线 渐变 ， 可 以 使 用 类 似 于 to top left ( 从 右 下 到 左上 ) 的 关键 字 来 实现 。 


回 ”color-stop: 用 于 指定 渐变 的 色 点 ， 包 括 一 个 颜色 值 和 一 个 起 点 位 置 ， 颜 色 值 和 起 点 位 置 以 
空格 分 隔 。 起 点 位 置 可 以 为 一 个 具体 的 长 度 值 (不 可 为 负 值 )， 也 可 以 是 一 个 百分比 值 ， 如 
果 是 百分比 值 则 参考 应 用 渐变 对 象 的 尺寸 ， 最 终 会 被 转换 为 具体 的 长 度 值 。 


a 


mE 页 样式 与 布局 从 入 门 到 精通 ( 微 课 精 编 版 ) 





【示例 1】 本 示例 为 <div id="demo"> 对 象 应 用 了 一 个 简单 的 线性 渐变 背景 ， 方 和 同 从 上 到 下 ， 颜 色 
由 白色 到 浅 灰 ， 效 果 如 图 4.19 所 示 。 


<style type="text/css"> 
#demo { 
width:300px:; 
height:200px; 
background: linear-gradient(#fff, #333); 
} 
</style> 
<div 1d="demo"></div> 





Xx 


(jj-| 人 多 http://localho... ~ 尽 C 全 localhost 





图 4.19 ”应 用 简单 的 线性 渐变 效果 


窑 提示 : 针对 示例 1, 用 户 可 以 继续 尝试 做 下 面 的 练习 , 实现 通过 不 同 的 设置 得 到 相同 的 设计 效果 。 
回 设置 一 个 方向 : 从 上 到 下 ,覆盖 默认 值 。 


linear-gradient(to bottom, #fff, #333): 
回 设置 反 向 渐变 : 从 下 到 上 ， 同 时 调整 起 止 颜 色 位 置 。 
linear-gradient(to top, #333, #fff): 

加 使 用 角度 值 设 置 方向 。 

linear-gradient(180deg, #fff, #333): 

回 明确 起 止 颜色 的 具体 位 置 ， 履 盖 默 认 值 。 
linear-gradient(to bottom , #fff 0%, #333 100%): 


【示例 2】 本 示例 演示 了 从 左边 开始 的 线性 渐变 。 起 点 是 红色 ， 慢 慢 过 渡 到 蓝 色 ， 效 果 如 图 4.20 
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所 示 。 

<style type="text/css"> 

#demo { 
width:300px:; height:200px:; 
background: -webkit-linear-gradient(left, red , blue); oatmSl 00 
background: -o-linear-gradient(left, red, blue); /* Opera 11.1 - 12.0 */ 
background: -moz-linear-gradient(left, red, blue); /* Firefox 3.6 - 15 */ 
background: linear-gradient(to right, red , blue): 谍 标准 语法 */ 

} 

</style> 





<div 1d="demo"></div> 


注意 ， 第 一 个 参数 值 渐变 方 癌 的 设置 不 同 。 
【示例 3】 通 过 指定 水 平和 垂直 的 起 始 位 置 来 设计 对 角 渐 变 。 本 示例 演示 了 从 左上 角 到 右 下 角 的 
线性 渐变 ， 起 点 是 红色 ， 慢 慢 过 渡 到 蓝 色 ， 效 果 如 图 4.21 所 示 。 


#demo { 
width:300px:; height:200px:; 
background: -webkit-linear-gradient(left top, red , blue); Saas G0 
background: -o-linear-gradient(left top, red, blue): /* Opera 11.1 - 12.0 */ 
background: -moz-linear-gradient(left top, red, blue): /* Firefox 3.6- 15 */ 
background: linear-gradient(to bottom right, red , blue): /# 标准 语法 */ 

} 


localhost:8080/mysite/t XX localhost:8080/mysite/i xX 


€ | 0 | localhost8080/ 了 © | localhost8080 团 蝶 CC » 





图 4.20 设计 从 左 到 右 的 线性 渐变 效果 图 4.21 设计 对 角 线 性 渐变 效果 


【示例 4】 通 过 指定 具体 的 角度 值 ， 可 以 设计 更 多 渐变 方向 。 本 示例 演示 了 从 上 到 下 的 线性 渐变 ， 
起 点 是 红色 ， 慢 慢 过 渡 到 蔓 色 ， 效 果 如 图 4.22 所 示 。 


a 
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#demo { 
wildth:300px: height:200px: 
background: -webkit-linear-gradient(-90deg, red, blue);  /* Safarl S.1 - 6.0 */ 
background: -o-linear-gradient(-90deg, red, blue): opealll 120* 
background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */ 
backsround: linear-gradient(180deg, red, blue): /# 标准 语法 */ 

} 

【补充 】 


渐变 角度 是 指 垂直 线 和 渐变 线 之 间 的 角度 ， 逆 时 针 方 癌 计算 。 例 如 ，0deg 将 创建 一 个 从 下 到 上 
的 渐变 ，90deg 将 创建 一 个 从 左 到 右 的 渐变 。 注 意 ， 渐 变 起 点 以 负 y 轴 为 参考 。 

但 是 ， 很 多 浏览 器 〈 如 Chrome、Safari、Firefox 等 ) 使 用 旧 的 标准 : 渐变 角度 是 指 水 平 线 和 泗 
变 线 之 则 的 角度 ， 逆 时 针 方 同 计算 。 例 如 ，0deg 将 创建 一 个 从 左 到 右 的 渐变 ，90deg 将 创建 一 个 从 
下 到 上 的 渐变 。 注 意 ， 渐 变 起 点 以 负 x 轴 为 参考 。 

兼容 公式 如 下 。 


90-x=y 


其 中 ，x 为 标准 角度 ，y 为 非 标准 角度 。 
【示例 S】 设 置 多 个 色 点 。 本 示例 定义 从 上 到 下 的 线性 渐变 ， 起 点 是 红色 ， 慢 慢 过 渡 到 绿色 ， 再 
慢 慢 过 渡 到 蓝 色 ， 效 果 如 图 4.23 所 示 。 


#demo { 
wildth:300px: height:200px:; 
background: -webkit-linear-gradient(red, green, blue): /* Safari $.1 - 6.0 */ 
background: -o-linear-gradient(red, green, blue): /* Opera 11.1 - 12.0 */ 
background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */ 
background: linear-gradient(red, green, blue): /# 标准 语法 */ 

} 


localhost8080/mysits Xx localhost:8080/mysite/: Xx 


二 (©) localhost:8080/mysi € () | localhost:8080/' 团 吕 ,Cc » 





图 4.22 设计 从 上 到 下 的 渐变 效果 图 4.23 设计 多 色 线 性 渐变 效果 
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【示例 6】 设 置 色 点 位 置 。 本 示例 定义 从 上 到 下 的 线性 渐变 ， 起 点 是 黄色 ， 快 速 过 渡 到 蓝 色 ， 再 
慢 慢 过 渡 到 绿色 ， 效 果 如 图 4.24 所 示 。 





#demo { 
wldth:300px: height:200px:; 
background: -webkit-linear-gradient(yellow, blue 20%, #0f0); Safans.l1- 60*/ 
background: -o-linear-gradient(yellow, blue 20%, #0f0); /* Opera 11.1 - 12.0 */ 
background: -moz-linear-gradient(yellow, blue 20%, #0f0); /* Firefox 3.6 - 15 */ 
background: linear-gradient(yellow, blue 20%, #0f0): /# 标准 语法 */ 

} 


【示例 7】CSS3 渐变 文 持 透明 度 设 置 ， 可 用 于 创建 减弱 变 淡 的 效果 。 本 示例 演示 了 从 左边 开始 的 
线性 渐变 。 起 点 是 完全 透明 ， 起 点 位 置 为 30%， 慢 慢 过 渡 到 完全 不 透明 的 红色 ， 为 了 更 清晰 地 看 到 
半 透 明 效果 ， 增 加 了 一 层 背 景 图 像 进行 衬托 ， 演 示 效 果 如 图 4.25 所 示 。 


#demo { 
width:300px: height:200px:; 
Sa sl 6 
background: -webkit-linear-gradient(left,rgba(255,0,0,0) 30%,rgba(255,0,0,1)),url(images/bg.jpe):; 
/* Opera 11.1 - 12*/ 
background: -o-linear-gradient(left,rgba(255,0,0,0) 30%,rgba(255,0,0,1)),url(images/bg.jpe); 
/* Firefox 3.6 - 15*/ 
background: -moz-linear-gradient(left,rgba(255,0,0,0) 30%,rgba(255,0,0,1)),url(images/bg.jpe); 


谍 标准 语法 */ 
background: linear-gradient(to right, rgba(255,0,0,0) 30%, rgba(255,0,0,1)),url(1mages/bg.jpg); 
backeground-size:cover; /* 背景 图 像 完 全 覆盖 */ 


localhost:8080/mysite/i XX localhost:8080/mysite/t XX 


(€ | | D/mysite/tekt5.html 轩 屿 CC te © localhost8080/ 





图 4.24 设计 多 色 线 性 渐变 效果 图 4.25 设计 半 透 明 线 性 渐变 效果 
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全 提示: 为 了 添加 透明 度 ， 可 以 使 用 rgba0 或 hsla0 函 数 来 定义 色 点 。igba0 或 hsla0 函 数 中 最 后 一 个 
参数 可 以 是 从 0 到 1 的 值 ， 它 定义 了 颜色 的 透明 度 : 0 表示 完全 透明 ，1 表示 完全 不 透明 。 


4.3.2 径 向 渐变 


创建 一 个 径 同 渐变 ， 也 人 至少 需要 定义 两 种 颜色 ， 同 时 可 以 指定 渐变 的 中 心 点 位 置 、 形 状 类 型 〈 圆 
形 或 椭圆 形 〉 和 半径 大 小 。 简 明 语法 格式 如 下 。 


radial-gradient(shape size at position, color-stop1, color-stop2, ...); 





参数 简单 说 明 如 下 。 
四 shape: 用 来 指定 渐变 的 类 型 ， 包 括 circle〈 圆 形 ) 和 ellipse (椭圆 ， 两 种 。 
四 ”size: 如 果 类 型 为 circle， 指 定 一 个 值 设 置 贺 的 半径 ; 如 果 类 型 为 ellipse， 指 定 两 个 值 分 别 
设置 椭圆 的 x 轴 和 y 轴 半 径 。 取 值 包括 长 度 值 、 百 分 比 、 关 键 字 。 关 键 字 说 明 如 下 。 
@ closest-side: 指定 径 同 渐变 的 半径 长 度 为 从 中 心 点 到 最 近 的 边 。 
@ closest-corner: 指定 径 同 渐变 的 半径 长 度 为 从 中 心 点 到 最 近 的 角 。 
@ farthest-side: 指定 径 回 渐变 的 半径 长 度 为 从 中 心 点 到 最 远 的 边 。 
@ farthest-corner: 指定 径 回 渐 变 的 半径 长 度 为 从 中 心 点 到 最 远 的 角 。 
四 ”position: 用 来 指定 中 心 点 的 位 置 。 如 果 提 供 两 个 参数 ， 第 1 个 表示 X 轴 坐标 ， 第 2 个 表示 
y 轴 坐标 ; 如 果 只 提供 1 个 值 ， 第 2 个 值 默 认为 S0%， 即 center。 取 值 可 以 是 长 度 值 、 百 分 
比 或 者 关键 字 ， 关 键 字 包括 left( 左 侧 )、center (水 平 居 中 )、right( 右 侧 )、top( 顶 部 )、 
center 〈 告 直 居 中 )、bottom (底部 )。 
注意 ，position 值 位 于 shape 和 size 值 后 面 。 
轴 color-stop: 用 于 指定 渐变 的 色 上 点。 包括 一 个 颜色 值 和 一 个 起 点 位 置 ， 颜 色 值 和 起 点 位 置 以 
空格 分 隔 。 起 点 位 置 可 以 为 一 个 具体 的 长 度 值 (不 可 为 负 值 )， 也 可 以 是 一 个 自分 比值 ， 如 
果 是 自分 比值 则 参考 应 用 渐变 对 象 的 尺寸 ， 最 终 会 被 转换 为 具体 的 长 度 值 。 
【示例 1】 在 默认 情况 下 ， 渐 变 的 中 心 是 center〈 对 象 中 心 点 )， 潮 变 的 形状 是 ellipse( 椭 圆 形 )， 
渐变 的 大 小 是 farthest-corner( 表 示 到 最 远 的 角落 )。 本 示例 仅 为 radial-gradientO 函 数 设置 3 个 颜色 值 ， 
则 它 将 按 默 认 值 绘制 径 向 渐变 效果 ， 如 图 4.26 所 示 。 


<style type="text/css"> 


#demo { 
height:200px; 
background: -webkit-radial-gradient(red, green, blue): Sabm Ss l= 00 
background: -o-radial-gradient(red, green, blue): /* Opera 11.6 - 12.0 */ 
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ 
background: radial-gradient(red, green, blue): /# 标准 语法 */ 

} 

</style> 


<div 1d="demo"></div> 
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所 全 (+)- 已 http://localhost:: ~ 忠心 合 localhost 








图 4.26 设计 简单 的 径 向 渐变 效果 


会 提示 : 针对 示例 1， 用 户 可 以 继续 尝试 做 下 面 的 练习 ， 实 现 通过 不 同 的 设置 ， 得 到 相同 的 设计 
效果 。 
回 设置 径 向 渐变 形状 类 型 ， 默 认 值 为 ellipse。 
background: radial-gradient(ellipse, red, green, blue); 
回 设置 径 向 渐变 中 心 点 坐标 ， 默 认为 对 象 中 心 点 。 
background: radial-gradient(ellipse at center $0%, red, green, blue); 
回 设置 径 向 渐变 大 小 ， 这 里 定义 填充 整个 对 象 。 
background: radial-gradient(farthest-corner, red, green, blue); 
【示例 2】 本 示例 演示 了 色 点 不 均匀 分 布 的 径 同 渐变 ， 效 果 如 图 4.27 所 示 。 


<style type="text/css"> 


#demo { 
height:200px:; 
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); Salan S.1- 60 
backsground: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */ 
background: -moz-radial-gradient(red 5%, green 15%, blue 6090): /* Firefox 3.6 - 15 */ 
background: radial-gradient(red 5%, green 15%, blue 609%): /# 标准 语法 */ 

} 

</style> 


<div 1d="demo"></div> 


【示例 3】shape 参数 定义 了 形状 ， 取 值 包 括 circle 和 ellipse， 其 中 circle 表示 圆 形 ，ellipse 表示 
椭圆 形 ， 默 认 值 是 ellipse。 本 示例 设计 圆 形 径 向 渐变 ， 效 果 如 图 4.28 所 示 。 


#demo { 


height:200px; 
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari $.1 - 6.0 */ 


A 
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background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */ 
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */ 
: background: radial-gradient(circle, red, yellow, green); /* 标准 语法 */ 


多 > 中- = http: /localhostf ~ a © 了 localhost 








图 4.27 ”设计 色 点 不 均匀 分 布 的 径 回 渐变 效果 图 4.28 设计 圆 形 径 同 渐 变 效果 
【示例 4】 本 示例 设计 径 回 渐变 的 半径 为 从 圆心 到 离 圆心 最 近 的 边 ， 如 图 4.29 所 示 。 


#demo { 
height:200px:; 
"Salm Tl G0 
background: -webkit-radial-gradient(60% $5%, closest-side,blue,ereen,yellow,black): 
Omallo= 120" 
background: -o-radial-gradient(60% $5%, closest-side,blue,green,yellow ,black): 
/* Firefox 3.6 - 15 */ 
background: -moz-radial-gradient(60% 55%, closest-slde,blue,green,yellow,black): 
上 # 标准 语法 */ 
background: radial-gradient(closest-side at 60% $5%, blue,ereen,yellow,black); 
} 


注意 ，radial-gradient0 标 准 函 数 与 各 私有 函数 在 设置 参数 时 顺序 不 同 是 有 区 别 的 。 

【示例 5】 本 示例 模拟 的 是 太阳 初 升 的 效果 ， 如 图 4.30 所 示 。 设 计 径 向 渐变 中 心 点 位 于 左下 角 ， 
半径 为 最 大 化 显示 ， 定 义 3 个 色 点 ， 第 1 个 色 点 设计 太阳 效果 ， 第 2 个 色 点 设计 太阳 余晖 ， 第 3 个 
色 点 设计 太空 ， 第 1 个 色 点 和 第 2 个 色 点 距离 为 60 像素 。 


#demo { 
height:200px; 
~“ Safan S160* 
background: -webkit-radial-gradient(left bottom, farthest-side, #f00, #f99 60px, #005): 
Opeall6- 120" 
background: -o-radial-gradient(left bottom, farthest-side, #f00, #f99 60px, #005): 
/* Firefox 3.6 - 15 */ 
background: -moz-radial-gradient(left bottom, farthest-side, #f00, #f{99 60px, #005); 
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上 # 标准 语法 */ 
background: radial-gradient(farthest-side at left bottom, #f00, #f99 60px, #005): 





口 localhost:8080/mysite/ x WW 


CG | © localhost:8080/mysite/test3.html 





图 4.29 ”设计 最 小 限度 的 径 回 渐变 效果 








图 4.30 ”模拟 太阳 初 升 效果 


【示例 6】 本 示例 模拟 太阳 旗 效 果 ， 如 图 4.31 所 示 。 设 计 径 同 渐变 中 心 点 位 于 对 象 中 央 ， 定 义 两 
个 色 点 ， 第 1 个 色 点 设计 太阳 效果 ， 第 2 个 色 点 设计 背景 ， 两 个 色 点 位 置 相 同 。 


<style type="text/css"> 
body { background:hsla(207,59%,78%,1.00) } 
#demo { 
height:200px; 
width:300px: 
margin:auto; 
J oatu Sl= 00% 
background: -webkit-radial-gradient(center, circle, #f00 SOpx, #fff SOpx): 
/* Opera 11.6 - 12.0 */ 
backsground: -o-radial-gradient(center, circle, #f00 SOpx, #fff SO0pxX): 
/* Firefox 3.6 - 15 */ 


a 
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background: -moz-radial-gradient(center, circle, #f00 SOpx, #fff SOpx); 
上 # 标准 语法 */ 
background: radial-gradient(circle at center, #f00 SOpx, #fff SOpx); 





</style> 
<div 1d="demo"></div> 


xX 


《一 [+ | @ http://localho... ~ 有 CC 铭 localhost 





图 4.31 模拟 太阳 旋 效 果 
44 案例 实战 


图 像 在 网 页 设计 中 的 作用 很 重要 ， 恰 当地 使 用 背景 图 像 能 够 设计 出 非 营 深 亮 、 精 致 的 页 面 效 果 。 
下 面 将 结合 多 个 案例 介绍 图 像 在 网 页 制作 中 的 魅力 。 


4.4.1 设计 图 文 混 排版 式 


在 网 页 中 经 常会 看 到 图 文 混 排 的 版 式 ， 不 管 是 单 图 还 是 多 图 ， 也 不 管 是 简单 的 文字 介绍 还 是 大 
段 正 文 ， 图 文 版 式 的 处 理 方式 是 比较 简单 的 。 在 本 节 案 例 中 所 展示 的 图 文 混 排 效果 ， 主 要 是 文字 围 
绕 在 图 片 的 旁边 进行 显示 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 以 下 代码 ， 代 码 
中 省 略 部 分 段落 文本 ， 读 者 可 以 参考 本 节 案 例 源 代码 进行 补 全 。 





<div class="plc news"> 
<h2> 儿 童 节 的 来 历 </h2> 
<p><lmg src="images/1.jpg" alt="" /><p> 
<p> 六 一 儿童 节 ， 也 叫 “ 六 一 国际 儿童 节 ”， 每 年 6 月 1 日 举行 ， 是 全 世界 少年 儿童 的 节日 。</p> 
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</div> 


第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 
样式 ， 设 置 图 片 的 属性 ， 将 其 控制 到 内 容 区 域 的 左上 角 。 





<style type="text/css"> 
.pic_news { width: 500px; /* 控制 内 容 区 域 的 宽度 ， 根 据 实际 情况 考虑 ， 也 可 以 不 需要 */} 
-plc news h2 { 
font-family: "隶书 "; 
font-size: 24pX; 
text-align: centerT'; 
} 
.plc_ news Img { 
float: left; /* 使 图 片 旁 边 的 文字 产生 浮动 效果 */ 
margin-right: 16px; 
margin-bottom: 16px; 
height: 250px; 
} 
.pic news p { text-indent:2em; /* 首 行 缩 进 2 个 字符 */ 
} 
</style> 


简单 几 行 CSS 样式 代码 就 能 实现 图 文 混 排 的 页 面 效 果 ， 其 显示 效果 如 图 4.32 所 示 ， 其 中 重点 内 
容 就 是 将 图 片 设置 为 浮动 ，float:left 就 是 将 图 片 向 左 浮动 。 


x 
Bhtpi//localhosts0e0/my -Bcl Set >x 关 本 是 和 > 
儿童 节 的 来 历 


六 一 儿童 节 ， 也 叫 “ 六 一 国际 儿童 
节 ”， 每 年 的 6 月 1 日 举行 ， 是 全 世界 少 
年 儿童 的 节日 。 


1942 年 6 月 ， 德 国法 西 斯 枪杀 了 捷 
克利 迪 策 村 16 风 以 上 的 男性 公民 140 剑 
人 和 全 部 婴儿 ， 并 扰 妇 女 和 90 名 儿童 
往 集中 营 。 村 里 的 房 合 、 建 筑 攀 均 被 


屋 ， 让 就 这 样 被 德国 法 
斯 给 毁 了 


为 了 悼念 利 迪 策 村 和 全 世界 所 有 在 

法 西 斯 侵略 战争 中 死难 的 儿童 ，1949 年 

国际 民主 妇女 联合 会 在 其 斯 科举 

了 理事 会 议 ， 站 

露 了 壳 国 主义 分 子 和 各 国 反动 派 区 菏 、 毒害 儿童 的 罪行 。 为 了 保障 世界 

各 国 儿童 的 生存 权 、 保 健 权 和 受 教 育 权 ， 为 了 改善 儿童 的 生活， 会 议决 
定 以 每 年 的 6 月 1 日 为 国际 儿童 节 。 





图 4.32 图 文 混 排 的 页 面 效果 
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4.4.2 ”设计 按钮 


本 例 设计 的 纯 CSS 按钮 具有 如 下 特点 。 

四 “不 需要 图 片 和 JavaScript。 

回 “支持 3 种 按钮 状态 :正常 、 悬 停 和 激活 。 

加 ”可 以 应 用 到 任何 HIML 元 素 ， 如 a、input、button、span、div、p、h3 等 。 

回 “安全 兼容 不 支持 CSS3 的 浏览 器 ， 如 果 不 兼容 CSS3， 则 显示 没有 渐变 和 阴影 的 普通 按钮 。 
3。 本 案例 设计 的 按钮 效果 如 图 4.33 所 示 。 按 钮 在 正常 状态 下 有 边框 的 渐变 和 阴影 ， 在 鼠标 经 过 时 
马尾 as 按钮 会 显示 比较 暗 的 渐变 效果 ， 当 按 下 鼠标 时 会 翻转 渐变 ， 并 显示 一 个 像素 的 下 沉 效 果 ， 按 钮 字体 
颜色 加 深 。 





[ localhost/mysite/test.ht! x Wl 





图 4.33 设计 精致 的 按钮 
本 例 主要 代码 如 下 。 


<style type="text/css"> 
body { 
background:#ededed: 
margin: 30px auto; 
color: #999; 
} 
.button {/* 定义 渐变 按钮 样式 类 */ 
display: Inline-block: 
/*zoom 和 *display 属性 都 为 了 兼容 IE7， 使 其 具有 display:inlineblock 特性 */ 


zoom: 1; 

*display: inline; 

vertical-align: baseline: /# 重 直 基线 对 齐 */ 

margin: 0 2px; 

outline: none; 证 取消 表单 按钮 控件 默认 的 轮廓 线 */ 
cursor: pointer: /# 鼠标 经 过 时 显示 手 形 指针 */ 
text-align: center: /# 文本 水 平 居 中 */ 

text-decoration: none: /*# 取消 a 元素 的 下 划 线 */ 


font: 14px/100% Arial, Helvetica, sans-serif: 


.134 。 


第 全 章 使 用 CSS 美化 图 像 一 3 ] 





。135。 











SO 网 页 样式 与 布局 从 入 门 到 精通 ( 微 课 精 编 版 ) 





</style> 
<div> 
<a hre 伍 "#" class="button black"> 圆 角 按 钮 </a> 
<a hre 人 ="#" class="button black bigrounded"> 大 号 覃 圆 按钮 </a> 
<a href="#" class="button black medium"> 中 号 按钮 </a> 
<a href="#" class="button black small"> 小 号 按钮 </a> <br /> 
</div> 


.3 设计 花边 框 


本 例 使 用 CSS3 多 背景 设计 花边 框 ,使 用 background-origin 属性 定义 仅 在 内 容 区 域 显示 背景 ,使 
用 background-clip 属性 定义 背景 从 边框 区 域 加 外 裁 台 ， 效 果 如 图 4.34 所 示 。 


se GS http://localhost/mysite/i PD - 0 多 localhost 





图 4.34 设计 花边 框 效 果 
本 例 主 要 代码 如 下 。 


<style type="text/css"> 
.demo { 
width: 400px: padding: 30px 30px; border: 20px solid rgba(104, 104, 142,0.5); 
border-radius: 10px; 
color: #f36; font-size: 80px; font-family:" 隶 书 ":line-height: 1.5; text-align: center; 
} 
.multipleBg { 
background: url("images/bg-tl.png")no-repeat left top, url("images/bg-tr.png")no-repeat right top, url 
("images/bg-bl.png")no-repeat left bottom, url("i1mages/bg-br.png") no-repeat right bottom, url("images/bg-repeat.png") 
repeat left top; 
记 改 变 背 景 图 片 的 position 起 始点 ， 四 灯 花 都 是 border 边缘 处 起 ， 而 平 铺 背 景 是 在 paddin 内 边缘 起 */ 
background-origin: border-box, border-box, border-box, border-box, padding-box: 
人 # 控 制 背景 图 片 的 显示 区 域 ， 所 有 背景 图 片 超过 border 外 边缘 都 将 被 竟 切 掉 */ 
background-clip: border-box: 


“0 
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</style> 





<div class="demo multipleBg"> 恭 嘉 发 财 </div> 


4.4.4 设计 图 片 镶 边 特效 





网 页 中 插入 一 个 图 像 时 ， 它 会 自动 显示 为 阴影 效果 ， 如 图 4.35 所 示 。 
其 实 定义 这 样 的 默认 样式 比较 简单 ,首先 需要 在 图 像 编 辑 器 中 设计 一 个 4 像素 高 、1 像素 宽 的 渐 
变 阴影 ， 如 图 4.36 所 示 。 





Ee > @ http://localhost:8080/mysite/test2.html = E localhost 





n shad _ bottom.p... 回回 固 





3200%，| 四 | 


图 4.35 ”为 图 像 定 义 默认 的 阴影 样式 图 4.36 设计 一 个 渐变 阴影 图 像 


然后 在 网 页 中 定义 如 下 样式 即 可 。 注 意 ， 在 定义 底 边 内 边 距 时 ， 考 虑 到 底 边 阴影 背景 图 像 可 能 
要 占用 4 个 像素 的 高 度 ， 因 此 要 多 设置 4 像素 。 左 右 两 侧 的 阴影 颜色 可 以 根据 网 页 背景 色 适 当 调 整 
深浅 。 

<style type="text/css"> 

body { background: #FOEADA:} 


img { 
background: white: 话 白色 背景 */ 
padding: Spx Spx 9px 5px; /# 增加 内 边 距 */ 
background: white url(images/shad bottom.gif) repeat-x bottom left: /* 底 边 阴影 */ 
border-left: 2px solid #dcd7c8: 诺 左 侧 浅 阴影 */ 
border-right: 2px solid #dcd7c8; 谍 右 侧 浅 阴 影 */ 

} 

</style> 


全 
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<img STc='"Iimages/1.]pg"wldth="200"> 
<img src="images/2.jpg" width="300"> 


] <img src="images/3.jpe" width="400"> 

7 4.4.5 设计 发 光 的 球体 

本 例 使 用 CSS3 径 回 渐变 制作 圆 形 球体 ,主要 利用 多 重 背 景 进行 设计 ， 然 后 使 用 径 同 渐变 有 登 加 设 
计 球 体 和 发 光 的 光 坚 效果 ， 如 图 4.37 所 示 。 








多 sl EE http://localhost/mysb PY BO 总 名 向 渐变 | 制作 国 形 .， x 





图 4.37 设计 发 光 的 球体 
本 例 主 要 代码 如 下 。 


<style type="text/css"> 
* {margin: 0; padding: 0;} 
dv { 
width: 300px; height: 300px; margin: S0px auto; 
border-radius: 100%: 
background-1mage: radial-gradient(8em circle at top, hsla(220,89%,100%,1), hsla(30,60%,60%.,.9)); 
} 
</style> 


<div></div> 
4.4.6 设计 图 标 


本 例 通过 CSS3 径 向 渐变 制作 圆 形 图 标 按钮 ， 用 到 的 知识 点 主要 包括 : 使 用 radial-gradient 属性 
定义 网 页 背景 ， 以 及 按钮 被 激活 状态 的 径 回 渐变 效果 ; 使 用 background-image 属性 定义 多 重 背景 效 
果 ， 其 中 一 个 为 浅 灰 色 亮 面 ， 男 一 个 是 深 陷 的 上 暗 点 ; 使 用 background-position 属性 把 这 两 个 绘制 的 背 
景 图 像 登 加 在 一 起 ; 使 用 background-size 属性 定义 多 重 背 景 显示 大 小 为 16px*16px， 然 后 按 默认 状态 
平 铺 显 示 。 设 计 效 果 如 图 4.38 所 示 。 
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3 http://localhost/m D7 名 


己 localhost 














图 4.38 定义 网 页 胀 点 背景 效果 


使 用 @font-face 命令 导入 外 部 字体 font/icomoon.eot， 定 义 字 体 图 形 效 果 。 

使 用 radial-gradient 属性 为 按钮 标签 定义 径 回 渐变， 设计 立体 按钮 效果 ， 使 用 border-radius: 50%; 
声明 定义 按钮 圆 形 显 示 ， 使 用 box-shadow 属性 为 按钮 添加 投影 效果 。 

使 用 text-shadow 属性 为 按钮 文本 定义 阴影 效果 ， 当 鼠标 经 过 按钮 时 ,使 用 text-shadow 属性 设计 
文本 发 亮 显示 。 

当 按 钮 被 激活 时 ， 使 用 box-shadow 属性 定义 按钮 内 阴影 ， 增 亮 按钮 效果 ， 使 用 radial-gradient 
设计 环形 径 同 渐变 效果 ， 为 按钮 添加 晕 边 效果 。 

示例 效果 如 图 4.39 所 示 。 

















图 4.39 ”设计 径 回 渐变 图 标 按钮 效果 


主要 页 面 代 码 如 下 。 


<style type="text/css"> 
body { 
background-color: #282828; 
background-1mage: radial-gradient(black 15%, transparent 16%), radial-gradient(black 15%, transparent 
16%), radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), radial-gradient(rgba(255, 255, 255, 0.1) 15%, 
transparent 20%); 
background-position: 0 Opx, 8px 8px, 0 1px, 8px 9px; 
background-size: 16px 16px; 
} 
(font-face { 
font-family: 1comoon ': 


sre: url('font/icomoon.eot"); 


A 
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sre: url('font/icomoon.eot?#iefix') format('embedded-opentype'), url(font/icomoon.svg#icomoon') format(svg )， 
url('font/icomoon.woff ) format(woff), url('font/icomoon.ttf ) format('truetype'); 
font-weight: normal: 
font-style: normal; 
} 
.controls button {width: S00px: margin: 40px auto:} 
.button { 
width: 70px: height: 70px: margin-right: 90px: 
font-size: 0: border: none: 
border-radius: $50%: 
box-shadow: 0 1px Spx rgba(255,255,255,.5) Inset 0 -2px Spx rgba(0,0,0,.3) nset, 0 3px 8px reba(0,0,0,.8): 
background: radial-gradient(circle at top center, #f{28fb8, #e982ad, #ec568c); 
} 
.button:nth-child(3) { margin-right: 0: } 
.button:after { 
font-family: "icomoon'; 
speak: none; 
font-weight: normal; 
-webkit-font-smoothing: antialiased; 
font-size: 36px; 
content: \21"; 
color: #ddS183: 
text-shadow: 0 3px 10px #fla2c]1, 0 -3px 10px #fla2c]1; 
} 
.button:nth-child(2):after { content: "\22"; } 
.button:nth-child(3):after { content: "\23";} 
.button:hover:after { color: #fff:; text-shadow: 0 lpx 20px #fccdda, 1px 0 14px #fccdda:} 
.button:active { 
box-shadow: 0 2px 7px rgba(0,0,0,.5) Inset, 0 -3px 10px rgba(0,0,0,.1) Imset, 0 1px 3px rgba(255,255,255,.5); 
background: radial-gradient(circle at top center, #f{28fb8, #e982ad, #ec568c); 


} 
</style> 


<div class="controls button"> 
<button type="button" class="button">Chrome</button> 
<button type="button" class="button">Firefox</button> 
<button type="button" class="button">IE</button> 


</div> 
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4.4.7 设计 图 片 水 印 


本 例 利 用 opacity 属性 设计 水 印 特 效 ， 同 时 利用 CSS 定位 技术 实现 水 印 与 图 片 重 登 显示 ， 演 示 效 
果 如 图 4.40 所 示 。 





Bai 全 本 





图 4.40 设计 水 印 特效 


【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml。 
第 2 步 ， 构 建 一 个 简单 的 HIML 结构 。 设 计 一 个 包含 框 〈<div class="watermark"> )， 主 要 是 为 
水 印 图 片 能 够 在 照片 上 精确 定位 提供 一 个 参照 ， 并 把 它们 都 捆绑 在 一 起 ， 避 人 免 在 网 页 中 随处 浮动 。 
插入 的 第 1 幅 图 片 为 照片 ， 第 2 幅 图 片 为 水 印 图 片 ， 代 码 如 下 。 
<div class="watermark"> 
<lmg src="i1mages/bg.jpg" class="1meg" width="400"> 
<lmg src="i1mages/logo.png" class="logo" width="100"> 
</div> 


在 没有 任何 样式 的 情况 下 ， 显 示 如 图 4.41 所 示 的 效果 。 





图 4.41 插入 图 像 后 的 效果 
第 3 步 , 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 , 定义 一 个 内 部 样式 表 , 然后 准备 输入 样式 。 
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第 4 步 ， 首 先 定义 包含 元 素 为 相对 定位 ， 这 样 能 够 保证 水 印 图 片 定位 在 照片 上 面 。 由 于 div 元 素 
默认 显示 块 状态 元 素 ， 宽 度 为 100%， 此 时 无 法 精确 定位 内 部 的 水 印 。 如 果 固 定 宽度 ， 就 使 设计 失去 
了 灵活 性 ， 还 需要 确定 包含 元 素 和 照片 的 宽度 。 具 体 样式 如 下 。 


.watermark { /#z 包含 块 样式 *#/ 
position:relative: /# 相对 定位 */ 
float:left: /# 回 左 浮动 ， 这 样 包含 元 素 能 够 自动 包 庄 包含 的 照片 */ 
display:inline; 上 # 行内 显示 ， 这 样 就 避免 包含 元 素 随 处 浮动 */ 

} 


第 5 步 ， 下 面 定 义 一 个 类 样式 ， 设 计 阴影 图 片 效 果 。 


-Img { 
background: white: 
padding: Spx Spx 9px Spx; 
background: white url(1mages/shad bottom.gif) repeat-x bottom left; 
border-left: 2px solid #dcd7c8; 
border-right: 2px solid #dcd7c8; 
} 


第 6 步 ， 定 义 水 印 透 明度 和 精确 定位 的 位 置 ， 有 具体 样式 如 下 。 


.Imgl { 
filter:alpha(opacity=40): /* 兼容 正 浏 览 器 */ 
-moz-opacity:0.4:; /* 兼容 Moz 和 FF 浏览 器 */ 
opacity: 0.4: /# 支持 CSS3 的 浏览 器 (FF 1.5 也 支持 〉*/ 
position:absolute: /# 绝对 定位 #/ 
right:20px; 谍 定位 到 照片 的 右 侧 */ 
bottom:20px: 度 定位 到 照片 的 底部 */ 
} 


IE 使 用 专 有 的 CSS 滤 镜 filter:alpha(opacity) 来 定义 对 象 的 透明 度 ， 而 Moz Family 浏览 器 使 用 私 
有 属性 -moz-opacity 来 定义 ， 对 于 标准 浏览 器 来 说 ， 一 般 都 支持 标准 属性 opacity。 上 面 的 样式 定义 水 
印 图 片 的 透明 度 为 0.4， 位 于 照片 的 右 下 角 。 


45 在 线 练 习 


使 用 CSS3 设计 各 种 网 页 图 像 效 果 ， 以 及 各 种 网 页 背景 图 像 特效 。 感 
以 扫 码 练习 。 
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大 早 


使 用 CSS 美化 超 链 接 


在 网 页 中 ， 超 链接 是 最 常用 的 对 象 ， 网 站 的 所 有 页 面 都 由 超 链 接 串 接 而 成 ， 超 链接 完 
成 了 页 面 之 间 的 跳 转 。 此 外 ， 超 链接 也 是 目前 浏览 者 与 服务 器 交互 的 主要 手段 之 一 。 当 单 
击 包含 超 链接 的 文字 、 图 片 或 其 他 对 象 时 ， 浏 览 器 会 根据 其 指示 载 入 一 个 新 的 页 面 ， 或 者 
跳 转 到 指定 位 置 ， 或 者 执行 特定 任务 。 通 过 CSS， 可 以 设置 超 链接 和 导航 栏 的 样式 及 其 外 
观 属性 。 


【 学 习 要 点 】 

中 认识 伪 类 和 伪 对 象 。 

WV 定义 超 链 接 样 式 。 

WI 能 金 灵 活 设计 符合 页 面 风 格 的 链接 样式 。 
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5.1 超 链 接 基 本 样式 


在 网 页 中 ， 被 超 链接 包 于 的 字体 颜色 默认 为 蓝 色 ， 链 接 文 本 默认 显示 一 条 下 划 线 ， 当 鼠标 指针 
移 到 超 链接 对 象 上 时 ， 鼠 标 指针 变 成 手 形 。 如 果 超 链接 被 访问 ， 那 么 链接 文本 颜色 就 会 发 生 改 变 ， 
显示 为 紫色 。 不 过 用 户 可 以 根据 网 站 或 页 面 设计 风格 使 用 CSS 重新 定义 超 链接 的 样式 。 

使 用 类 型 选择 器 a 可 以 设置 超 链接 的 默认 样式 。 例 如 ， 下 面 的 样式 可 以 将 所 有 链接 文本 设置 为 
红色 。 


af color: red;} 


超 链接 存在 4 种 状态 ， 同 时 直接 为 <a> 标 签 定 义 样式 ， 会 影响 销 点 的 样式 。 一 般 情 况 下 锁 点 是 不 
要 显示 出 来 的 ， 为 了 避免 这 个 问题 ，CSS 为 a 元 素 提 供 了 如 下 4 个 状态 伪 类 选择 器 定义 链接 样式 。 

加 a:link: 链接 默认 的 样式 。 

加。 a:visited: 链接 已 被 访问 过 的 样式 。 

四 ”ahover: 鼠标 指针 在 链接 上 的 样式 。 

四 a:active: 单 击 链接 时 的 样式 。 

【示例 1】 在 本 示例 中 定义 页 面 所 有 超 链 接 默 认为 红色 下 划 线 效果 ， 当 鼠标 指针 经 过 时 显示 为 绿 
色 下 划 线 效果 ， 而 当 单 击 超 链 接 时 则 显示 为 黄色 下 划 线 效果 ， 超 链接 被 访问 过 之 后 显示 为 蓝 色 下 划 
线 效 果 ， 代 人 码 如 下 ， 演 示 效 果 如 图 5.1 所 示 。 


<style type="text/css"> 

a:link {color: #FF0000;/* 红色 */} /# 超 链接 默认 样式 */ 

a:Visited {color: #0000FF:; /* 蓝 色 */} /#* 超 链 接 被 访问 后 的 样式 */ 
a:hover {color: #00FF00; /* 绿色 */} /# 鼠标 指针 经 过 超 链接 的 样式 */ 
a:active {color: #FFFF00; /* 黄色 */} /# 超 链接 被 激活 时 的 样式 */ 
</style> 


<ul class="p1"> 
<]i><a hre 伍 "#" class="al"> 首 页 </a></li> 
<]li><a href="#" class="a2"> 新 闻 </a></li> 
<]i><a hre 伍 "#" class="a3"> 微 博 </a></li> 
</ul> 
<ul class="p2"> 
<li><a href="#" class="al"> 关 于 </a></li> 
<]li><a hre 传 " 操 ' class="a2"> 版 权 </a></li> 
<]i><a hre 传 "#' class="a3"> 友 情 链 接 </a></li> 
</ul> 
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图 5.1 定义 超 链接 样式 


【示例 2】 针 对 示例 1 的 文档 结构 ， 如 果 要 定义 第 一 个 列表 内 超 链接 样式 ， 则 可 以 使 用 包含 选择 
句 来 定义 ， 代 人 码 如 下 。 


a:link {color: #FF0000;/* 红色 */} /# 超 链接 默认 样式 */ 

a:Visited {color: #0000FF: /* 蓝 色 */} /# 超 链接 被 访问 后 的 样式 */ 
a:hover {color: #00FF00; /* 绿色 */} /# 鼠标 指针 经 过 超 链接 的 样式 */ 
a:active {color: #FFFF00; /* 黄色 */} /# 超 链 接 被 激活 时 的 样式 */ 

.pl a:link {color: #FF0000:;} 

.pl aivisited {color: #0000FF:} 

.pl a:hover {color: #00FF00:} 

.pl a:active {color: #FFFFO00;:} 


【示例 3】 用 户 可 以 使 用 限定 选择 器 定义 超 链接 样式 。 所 谓 限定 选择 器 ， 就 是 在 伪 类 、 类 或 ID 选 
择 器 前 面 附 加 一 个 子 选择 器 ， 限 定 后 面子 选择 器 所 匹配 的 范围 。 注 意 ， 限 定 选择 器 中 间 没 有 空格 ， 
代码 如 下 。 


.al:link {color: #FF0000:} 
.al:visited {color: #0000FF: } 
.al:hover {color: #00FF00:} 
.al:active {color: #FFFFO0;} 


也 可 以 双重 限定 ， 代 码 如 下 。 


a.al:link {color: #FF0000;} 
a.al:visited {color: #0000FF: } 
a.al:hover {color: #00FF00:} 
a.al:active {color: #FFFFO0:} 


< 所 注意 ; 在 定义 超 链接 样式 时 ， 超 链接 的 4 种 状态 顺序 是 有 和 要求 的 ， 一 般 不 能 随意 调换 。 正 确 顺 
序 应 该 是 : link 一 visited 一 hover>active。 
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【示例 4】 在 下 面 样式 中 ， 当 鼠标 指针 经 过 超 链 接 时 ， 会 先 执行 第 1 行 声明 ， 但 是 紧 接 着 第 3 行 
声明 的 样式 会 覆 兰 第 1 行 和 第 2 行 声 明 的 样式 ， 所 以 就 无 法 看 到 鼠标 指针 经 过 和 被 激活 时 的 效果 。 


a.al:hover {color: #00FF00:} 
a.al:active {color: #FFFFO00:} 
a.al:link {color: #FF0000;} 
a.al:visited {color: #0000FF:; } 


【示例 5】 超 链接 的 4 种 状态 并 非 都 要 定义 ， 可 以 根据 需要 定义 其 中 的 两 个 或 3 个 。 如 果 要 把 未 
访问 的 和 已 经 访问 的 链接 定义 成 相同 的 样式 ， 则 可 以 定义 link、hover 和 active 3 种 状态 ， 代 码 如 下 。 


a.al:link {color: #F F0000;} 
a.al:hover {color: #00FF00:} 
a.al:active {color: #FFFFO00:} 


【示例 6】 如 果 仅 希望 超 链接 显示 两 种 状态 样式 ， 可 以 使 用 a 和 hover 来 定义 。 其 中 <a> 标 签 选择 
句 定 义 a 元 素 的 默认 显示 样式 ， 然 后 定义 鼠标 指针 经 过 时 的 样式 ， 代 码 如 下 。 


a {color: #FF0000:} 
a:hover {color: #00FF00:} 


【示例 7】 如 果 页 面 中 还 包括 锚 记 ， 将 会 影响 锚 记 的 样式 。 如 果 定 义 如 下 的 样式 ， 则 仅 影 响 超 链 
接 未 访问 时 的 样式 和 鼠标 指针 经 过 时 的 样式 ， 代 码 如 下 。 


a:link {color: #FF0000;} 
a:hover {color: #00FF00:} 


5.2 案例 实战 


超 链接 对 象 可 以 显示 为 多 种 样式 ， 如 动画 、 按 钮 、 图 像 、 特 效 等 ， 本 节 将 通过 多 个 案例 介绍 党 
用 链接 样式 的 设计 技巧 。 
5.2.1 设计 下 划 线 样式 

很 多 用 户 不 喜欢 超 链接 的 默认 下 划 线 效果 ， 那 么 可 以 使 用 下 面 的 样式 清除 它 。 

a {/* 完全 清除 超 链接 的 下 划 线 效果 */ 


text-decoration:none: 


} 
然后 设计 在 鼠标 指针 经 过 时 增加 下 划 线 ， 因 为 下 划 线 具有 很 好 的 提示 作用 ， 代 码 如 下 。 
a:hover {/* 鼠标 指针 经 过 时 显示 下 划 线 效果 */ 
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text-decoration:underline: 


} 


下 划 线 样式 不 仅仅 是 一 条 实 线 ， 可 以 根据 需要 自 定 义 设计 。 主 要 设计 思路 如 下 。 

四 ”借助 <a> 标 签 的 底 边 框 线 来 实现 。 

四 ”利用 背景 图 像 来 实现 。 利 用 背景 图 像 可 以 设计 出 更 多 精巧 的 下 划 线 样式 。 

【示例 1】 本 示例 设计 当 鼠 标 指 针 经 过 时 显示 虚 下 划 线 、 加 粗 、 加 重 色彩 的 效果 ， 把 这 个 样式 表 
引入 到 页 面 中 ， 则 超 链 接 的 显示 效果 如 图 5.2 所 示 。 





<style type="text/css"> 

a {l* 超 链接 的 默认 样式 */ 
text-decoration:none: /# 清除 超 链接 下 划 线 */ 
color:#999: /# 浅 灰 色 文 字 效果 */ 

ahover {/*# 忌 标 指针 经 过 时 样式 */ 
border-bottom:dashed 1px red: /# 鼠标 指针 经 过 时 显示 虚 下 划 线 效果 */ 
color:#000: /# 加 重 颜色 显示 */ 
font-weight:bold:; 谍 加 粗 字体 显示 */ 
zoom:1: /# 解决 正 浏览 器 无 法 显示 问题 */ 
} 

</style> 


<p> 下 载 <a hre 伍 "#">HTML 文档 </a> 和 <a hre 伍 "#">CSS 文件 </a></p> 


E http://localhost:8080, ~ @ CONE 


下 载 HTML 文档 和 


图 52 定义 下 划 线 样式 


【示例 2】 在 本 示例 中 ， 定 义 超 链接 始终 显示 为 下 划 线 效果 ， 并 通过 颜色 变化 来 提示 鼠标 指针 经 
过 时 的 状态 变化 。 代 码 如 下 ， 效 果 如 图 5.3 所 示 。 





<style type="text/css"> 
a {/* 超 链 接 的 默认 样式 */ 
text-decoration:none: /# 清除 超 链接 下 划 线 */ 
border-bottom:dashed 1px red: /#* 红 色 虚 下 划 线 效果 */ 
color:#666: /*#* 灰色 字体 效果 */ 
zoom:1: /#* 解决 正 浏览 器 无 法 显示 的 问题 */ 
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ahover {/* 鼠标 指针 经 过 时 样式 */ 


color:#000: /# 加 重 颜色 显示 */ 


border-bottom:dashed lpx #000: 谍 改变 虚 下 划 线 的 颜色 */ 
</style> 


<p> 下 载 <a hre 仁 "#">HTML 文档 </a> 和 <a hre 舍 " 操 >CSS 文件 </a></p> 
《大 作 太 六 


展示 以 CSS 技 术 为 基础 ， 并 提供 超 强 的 视觉 冲击 力 。 只 要 选择 列表 中 任意 
一 个 样式 表 ， 就 可 以 将 它 加 载 到 本 页 面 中 ， 并 呈现 不 同 的 设计 效果 。 


下 载 HTML 文档 和 SS 





图 5.3 定义 下 划 线 颜色 


【示例 3】 由 于 浏览 器 在 解析 虚线 时 的 效果 并 不 一 致 ， 且 显示 效果 不 是 很 精致 ， 如 果 使 用 背景 图 
来 定义 下 划 线 的 虚线 样式 ， 则 效果 会 更 好 。 

第 1 步 ， 使 用 Photoshop 设计 一 个 虚线 图 ， 如 图 5.4 所 示 是 一 个 放大 32 倍 的 虚线 段 设计 图 效果 
(images/dashed.psd)， 在 设计 时 应 该 确保 高 度 为 1 像素 ， 宽 度 可 以 为 4 像素 、6 像素 或 8 像素 。 这 个 
主要 根据 虚线 的 疏 密 进行 设置 ， 然 后 选择 一 种 颜色 以 跳 格 方式 进行 填充 ， 最 后 保存 为 GIF 格式 图 像 
即 可 。 当 然 最 佳 视 觉 空隙 是 间隔 两 个 像素 空格 。 





正常 YY | 不 透明 度 :|1003。 > 
" dashed. psd @ 3200% (RGB/8) 本 
镇 定 : 日 和 中 全 填充 :| 100 


图 5.4 使 用 Photoshop 设计 虚线 段 


第 2 步 ， 修 改 示 例 2 中 的 下 划 线 样式 ， 使 用 背景 图 代替 border-bottom:dashed 1px red; 声 明 ， 主 要 
样式 代码 如 下 ， 预 览 效 果 如 图 5.5 所 示 。 


a{/# 超 链接 的 默认 样式 */ 


text-decoration:none: /# 清除 超 链 接 下 划 线 */ 
color:#666: /* 灰色 字体 效果 */ 
} 


a:hover {/* 鼠标 指针 经 过 时 样式 */ 
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color:#000: /* 加 重 颜色 显示 */ 
/# 定义 背景 图 像 ， 定 位 到 超 链接 元 素 的 底部 ， 并 沿 x 轴 水 平平 铺 */ 
background:url(1mages/dashed1 .gif) left bottom repeat-x:; 





4 
YG 
下 载 HTML 文 档 和 SSSX 付 





图 5.5 背景 图 像 设计 的 下 划 线 样式 


窑 提示: 有 关 下 划 线 的 效果 还 有 很 多 ， 只 要 巧妙 结合 超 链接 的 底部 边框 、 下 划 线 和 背景 图 像 ， 就 
可 以 设计 出 很 多 有 个 性 的 样式 。 例 如 ， 定 义 下 划 线 的 颜色 、 下 划 线 距离 、 下 划 线 长 度 和 
对 齐 方 式 以 及 定制 双 下 划 线 等 。 

5.2.2 设计 动态 下 划 线 样式 


如 果 使 用 GIF 动画 作为 背景 图 像 ， 来 模拟 超 链接 的 下 划 线 样式 ， 则 可 以 让 下 划 线 动 起 来 ， 演 示 
效果 如 图 5.6 所 示 。 





X 
a zl EE http://localhost:8080, ~ 全 0 


图 5.6 设计 动态 下 划 线 样式 





示例 代码 如 下 。 


<style type="text/css"> 

a, a:Vlslted { 
background: url(images/bg2.g1f) repeat-x left bottom: 
text-decoration: none:; 


} 

a:hover { 
background: url(images/bg.gif) repeat-x left bottom:; 
text-decoration: none; 


} 
</style> 


<p> 下 载 <a hre 伍 "#">HTML 文档 </a> 和 <a hre 伍 "#">CSS 文件 </a></p> 
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5.2.3 设计 按钮 样式 


设计 立体 按钮 效果 的 一 般 方法 如 下 。 

第 一 ， 利 用 边框 线 的 颜色 变化 来 制造 视觉 错觉 。 可 以 把 右边 框 和 底部 边框 相 结合 ， 把 顶部 边框 
和 左边 框 相 结合 ， 利 用 明暗 色彩 的 搭配 来 设计 立体 变化 效果 。 

第 二 ， 利 用 超 链 接 背 景色 的 变化 来 营造 凸凹 变化 的 效果 。 超 链接 的 背景 色 可 以 设置 相对 较 深 的 
颜色 ， 以 营造 凸 起 效果 ， 当 鼠标 指针 经 过 时 ， 再 定义 浅 色 背景 来 营造 上 四 下 效果 。 

第 三 ， 利 用 环境 色 、 字 体 颜 色 〈 前 景色 ) 来 烘托 立体 变化 过 程 。 

【示例 1】 在 本 示例 中 ， 定 义 超 链接 在 默认 状态 下 显示 灰色 右边 框 线 、 灰 色 底 边框 线 效果 。 而 当 
鼠标 指针 经 过 时 ， 则 清除 右 侧 和 底部 边框 线 ， 并 定义 左 侧 和 顶部 边框 效果 ， 这 样 利 用 错觉 设计 出 一 
个 简单 的 凸 四 立体 效果 。 代 码 如 下 ， 演 示 效 果 如 图 5.7 所 示 。 





<style type="text/css"> 
a {/* 超 链接 的 默认 样式 */ 


text-decoration:none: 此 清除 超 链接 下 划 线 */ 
border-right:solid 1px #666; /# 灰色 右边 框 线 */ 
border-bottom:solid 1px #666; 谍 灰色 底 边 框 线 */ 
zoom:1: /# 解决 正 浏 览 器 无 法 显示 问题 */ 
} 

ahover {/* 鼠标 经 过 时 样式 */ 
border-left:solid 1px #666;: /# 灰色 左边 框 线 */ 
border-top:solid 1px #666: /# 灰色 顶 边框 线 */ 
border-right:none:; /# 清除 右边 框 线 */ 
border-bottom:none: /# 清除 底 边 框 线 */ 
} 

</style> 


<p> 下 载 <a hre 仁 "#">HTML 文档 </a> 和 <a hre 伍 "#">CSS 文件 </a></p> 


XxX 
| http://localhost:s080, ~ 有 


图 5.7 定义 简单 的 立体 样式 
示例 1 的 立体 效果 不 是 很 明显 , 但 是 如 果 结 合 前 景色 和 背景 色 的 变化 ， 以 及 页 面 背 景色 的 衬托 ， 
就 可 以 设计 更 立体 化 的 超 链 接 效 果 。 
【示例 2】 在 本 示例 中 ， 结 合 网 页 背景 色 、 超 链接 的 背景 色 和 前 景色 ， 设 计 一 个 更 富有 立体 效果 
的 超 链接 样式 。 代 码 如 下 ， 演 示 效 果 如 图 5.8 所 示 。 
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<style type="text/css"> 
body { background:#fcc; /* 浅 色 背景 */} 
a {l* 超 链接 的 默认 样式 */ 
text-decoration:none: 
border:solid 1px;: 
padding: 0.4em 0.8em: 
color: #444: 
background: #f99:; 
border-color: #fff #aaab9c #aaab9c #1fff: 
Zoom:1; 
} 
ahover {/* 鼠标 指针 经 过 时 样式 */ 
color: #800000: 
background: transparent: 
border-color: #aaab9c #1fff #fff #aaab9ce: 


} 
</style> 
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/* 网 页 背景 颜色 */ 


/# 清除 超 链 接 下 划 线 */ 

/# 定义 1 像素 实 线 边框 */ 

谍 增加 超 链接 补 白 */ 

/# 定义 灰色 字体 */ 

/# 超 链 接 背 景色 */ 

/# 分 配 边 框 颜色 */ 

/# 解决 正 浏览 器 无 法 显示 的 问题 */ 





/* 超 链接 字体 颜色 */ 
/* 清除 超 链接 背景 色 */ 
/* 分 配 边 框 颜色 */ 


<p> 下 载 <a hre 伍 "#">HTML 文档 </a> 和 <a hre 伍 "#">CSS 文件 </a></p> 


个 hp//ocalhosts0s0, - a ol € 
下 载 HTMI 文 档 和 el 





http://www.csszengarden.com/zengarden-sam,,. 
图 5.8 定义 通 真 的 立体 样式 


5.2.4 设计 背景 图 像 交 换 样式 


背景 图 像 交 换 样 式 的 设计 技巧 : 利用 相同 大 小 但 不 同 效果 的 背景 图 像 进行 轮换 ， 模 拟 复杂 的 鼠 
标 动 态 效果 。 因 此 ， 图 像样 式 的 关键 是 背景 图 像 的 设计 和 几 种 不 同 效果 的 背景 图 像 是 否 能 够 过 渡 自 
然 、 切 换 吻 合 。 

【示例 1】 下 面 通过 一 个 案例 进行 演示 说 明 。 

第 1 步 ， 使 用 Photoshop 设计 两 幅 大 小 相同 但 效果 略 不 同 的 图 像 ， 如 图 5.9 所 示 。 图 像 的 大 小 为 
200px*32px， 第 1 张 图 像 设计 风格 为 渐变 灰色 ， 并 带 有 玻璃 效果 ， 第 2 张 图 像 设 计 风格 为 深 黑 色 渐 变 。 


bsgl.gI bg2.g1f 
图 5.9 设计 背景 图 像 
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第 2 步 ， 在 Dreamweaver 中 使 用 两 张 背景 图 像 设计 超 链接 的 样式 。 页 面 完整 代码 如 下 。 


全 让 : <style type="text/css"> 

外- ”a {/* 超 链接 的 默认 样式 */ 

text-decoration:none: /* 清除 默认 的 下 划 线 */ 

display:inline-block: 谍 行内 块 状 显示 */ 

padding:2px lem:; /# 为 文本 添加 补 白 效 果 */ 
height:28px: /# 固定 高 度 */ 
line-height:32px: /# 行 高 等 于 高 度 ， 设 计 垂 直 居 中 */ 
text-align:center: /x 文本 水 平 居中 */ 
background:url(images/b1.gifp no-repeat center; /# 定义 背景 图 像 1， 禁 止 平 铺 ， 居 中 */ 
color:#ccece: /# 浅 灰 色 字 体 */ 
} 


ahover {/* 鼠标 指针 经 过 时 样式 */ 
background:url(images/b2.gif) no-repeat center:; /* 定义 背景 图 像 2， 禁 止 平 铺 ， 居 中 */ 
color:#fff: /#* 白色 字体 */ 
} 

</style> 


<p> 下 载 <a hre 仁 "#">HTML 文档 </a> 和 <a hre 伍 "#">CSS 文件 </a></p> 


在 上 面 样式 代码 中 ， 先 定义 超 链接 以 行内 块 状 显示 ， 这 样 便 于 控制 它 的 宽 和 高 ， 然 后 根据 背景 
图 像 大 小 定义 a 元 素 的 大 小 ， 并 分 别 为 默认 状态 和 鼠标 指针 经 过 状态 下 定义 背景 图 像 。 

超 链接 的 宽度 可 以 不 必 等 于 背景 图 像 的 宽度 ， 只 要 小 于 背景 图 像 的 宽度 即 可 。 但 是 高 度 必 须 保 
持 与 背景 图 像 的 高 度 一 致 。 在 设计 中 可 以 结合 背景 图 像 的 效果 定义 字体 颜色 。 

第 3 步 ， 在 浏览 圳 中 预览 ， 所 得 到 的 超 链接 效果 如 图 5.10 所 示 。 


http://www.csszengarden.com/zengarden-sam... 





图 5.10 背景 图 像 交 换 链 接 效 果 


【示例 2】 为 了 减少 两 幅 背 景 图像 的 HTTP 请 求 次 数 ， 避 免 占用 不 必要 的 带宽 ， 可 以 把 交换 的 两 
幅 图 像 合 并 为 一 幅 图 像 ， 然 后 利用 CSS 定位 技术 控制 背景 图 像 显 示 区 域 。 
例如 ， 对 于 示例 1 中 的 背景 图 像 ， 可 以 将 其 合并 为 一 幅 图 像 ， 如 图 5.11 所 示 。 





图 5.11 合并 背景 图 像 
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然后 ， 在 超 链接 中 直接 引用 该 合成 图 像 ， 合 成 背景 图 像 高 度 增加 为 64px， 在 默认 状态 和 鼠标 指 
针 经 过 时 仅 部 分 背景 可 见 ， 设 计 的 CSS 代码 如 下 。 


a {l* 超 链 接 的 默认 样式 */ 





text-decoration:none: /# 清除 默认 的 下 划 线 */ 
display:inline-block: 上 # 行内 块 状 显示 */ 
padding:2px lem: 谍 为 文本 添加 补 白 效果 */ 
height:28px; 谍 固定 高 度 */ 
line-height:32px; 谍 行 高 等 于 高 度 ， 设 计 垂 直 居 中 */ 
text-align:center: /# 文本 水 平 居中 */ 
background:url(images/b3.gif) no-repeat center top: /# 定义 背景 图 像 1， 禁 止 平 铺 ， 居 中 */ 
color-#ccc: /# 浅 灰 色 字 体 */ 
} 

ahover {/* 鼠标 指针 经 过 时 样式 */ 
background-position:center bottom:; /# 定位 背景 图 像 ， 显 示 下 半 部 分 */ 
color:#fff: /# 白色 字体 */ 
} 


本 例 与 上 例 设计 思路 基本 相同 ， 主 要 是 在 引用 外 部 图 像 时 所 有 背景 图 像 组 合 在 一 张 图 中 ， 然 后 
利用 CSS 精确 定位 ， 显 示 一 半 图 像 ， 以 实现 在 不 同 状态 下 显示 不 同 的 背景 图 像 。 

使 用 背景 图 像 设 计 超 链接 样式 比较 实用 ， 且 所 设计 的 效果 可 以 模拟 各 种 效果 ， 只 要 背景 图 设计 
新 颖 、 漂 亮 即 可 。 
5.2.5 ”设计 鼠标 指针 样式 


在 默认 状态 下 ， 鼠 标 指针 经 过 超 链接 时 显示 为 手 形 ， 使 用 CSS 的 cursor 属性 可 以 改变 这 种 默认 国明 和 
效果 。cursor 属性 定义 鼠标 指针 在 指定 对 象 上 的 样式 ， 取 值 说 明 如 表 5.1 所 示 。 


表 5.1 cursor 属性 取 值 说 明 





值 说 明 
auto 基于 上 下 文 决 定 应 该 显示 什么 光标 
crosshair 十 字 线 光标 (+) 
default 基于 平台 的 默认 光标 。 通 常 演 染 为 一 个 箭头 
pointer 指针 光标 ， 表 示 一 个 超 链接 
move 十 字 篆 头 光 标 ， 用 于 标示 对 象 可 被 移动 


e-resize 、ne-resize、nw-resize、n-resize、| 表示 正在 移动 革 个 边 ， 如 se-resize 光标 用 来 表示 框 的 移动 开始 于 东 


Se-IeslZe、SW-IeslZe、S-TIeslZze、W-Ieslze | 南 角 


text 表示 可 以 选择 文本 。 通 常 泻 染 为 I 形 光标 


i 
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续 表 
值 说 明 
wait 表示 程序 正 忙 ， 需 要 用 户 等 待 ， 通 常 泻 染 为 手表 或 沙漏 
help 光标 下 的 对 象 包含 帮助 内 容 ， 通 常 演 染 为 一 个 问号 或 一 个 气球 
<uri>URL 自 定 义 光 标 类 型 的 图 标 路 径 


表 5.1 所 列 的 是 W3C 推荐 的 标准 光标 类 型 ,但 是 下 也 自 定义 了 不 少 专 有 属性 值 。 例 如 ， 对 于 手 
形 光 标 类 型 ，IE 提供 了 hand 专 有 属性 ,而 标准 属性 值 为 pointer， 如 果 考 虑 兼容 问题 ， 可 以 按 如 下 方 
法 设计 ， 保 证 在 不 同 浏览 器 中 都 显示 为 手 形 光标 。 


ai{ 
cursor:pointer; /# 鼠标 经 过 时 手 形 样式 */ 
cursor:hand: /# 兼容 下 6 以 下 版 本 浏览 器 */ 
} 


如 果 自 定义 光标 样式 ， 使 用 绝对 或 相对 URL 指定 光标 文件 (后 缀 为 .cur 或 者 .ani)。 
【示例 】 本 示例 定义 了 鼠标 指针 样式 为 十 字 丢 心 。 代 码 如 下 ， 演 示 效 果 如 图 5.12 所 示 。 


<style type="text/css"> 
a {l* 超 链接 的 默认 样式 */ 
text-decoration:none; display:inline-block: padding:2px lem; height:28px; line-height:32px; text-align:center; 
background:url(1mages/b1.g1f) no-repeat center; color:#ccc: } 
a:hover {/* 鼠标 经 过 时 样式 */ 
background:url(1mages/b2.g1f) no-repeat center; color:#fff: 
cursor:url('images/Cursor 3.cur'"), url(images/Cursor 3.gif); /* 自 定 义 光 标 样式 */ 


} 
</style> 


<p> 下 载 <a hre 伍 "#">HTML 文档 </a> 和 <a hre 伍 "#">CSS 文件 </a></p> 


xX 


所 rl ES http://localhost:8080, ~ 全 0 


下 载 轩 全 WE 二 " cs 


http://www.csszengarden.com/zengarden-sample.css 








图 5.12 自 定义 光标 样式 效果 
【补充 】 
使 用 上 自 定 义 图 像 作为 光标 类 型 ,IE 和 Opera 只 支持 *.cur 等 特定 的 图 片 格式 ; 而 Firefox、Chrome 
和 Safari 既 支 持 特 定 图 片 类 型 ， 也 支持 常见 的 *.jpg、*.gif、*.jpg 等 图 片 格式 。 
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cursor 属性 值 可 以 是 一 个 序列 ， 当 用 户 端 无 法 处 理 第 1 个 图 标 时 ， 它 会 尝试 处 理 第 2 个 、 第 3 
个 等 ， 如 果 用 户 端 无 法 处 理 任 何 定 义 的 光标 ， 它 必须 使 用 列表 最 后 的 通用 光标 。 例 如 ， 下 面 样式 中 
就 定义 了 3 个 自 定义 动画 光标 文件 ， 最 后 定义 了 一 个 通用 光标 类 型 。 


a:hover { cursor:url(1mages/1.ani1"), Url(images/1. cur), url(1mages/1.g1f), pointer;} 


5.2.6 ”设计 图 片 按钮 样式 


在 网 页 中 会 经 常 看 见 使 用 图 像 设 计 的 超 链接 按钮 。 为 超 链接 设计 图 像样 式 可 以 有 多 种 方法 ， 其 
中 最 常用 的 方法 是 借助 CSS 的 background-image 属性 来 定义 超 链接 的 背景 图 像 。 

【示例 1】 本 示例 通过 用 背景 图 像 蔡 换 超 链接 文本 ， 来 设计 与 页 面 风 格 相 统一 的 超 链 接 效果 ， 演 
示 效 果 如 图 5.13 所 示 。 





<style type="text/css"> 
a.reg { /*# 超 链接 样式 */ 
background: transparent url(images/btn2.gif) no-repeat top left: /* 背景 图 像 */ 


display: block: /# 块 状 显 示 ， 方 便 定义 宽度 和 高 度 */ 
width:74px: /# 宽度 ， 与 背景 图 像 同 宽 */ 
height: 25px: /# 高 度 ， 与 背景 图 像 同 高 */ 
text-indent:-999px: /* 隐藏 超 链接 中 的 文本 */ 

} 

</style> 


<a class="reg" href="#"> 注 册 </a> 


X 
:二 rail EE http://localhost8080 ~ 盟 @ E 





图 5.13 ”使 用 图 形 化 按钮 设计 超 链接 样式 


< 全 注意 : 在 使 用 背景 图 像 来 设计 超 链接 时 应 注意 以 下 几 个 问题 。 

@ 如 果 完 全 使 用 背景 图 像 来 设计 一 个 超 链接 样式 ， 应 防止 背景 图 像 的 重复 平 铺 ， 可 以 
使 用 background-repeat 属性 禁止 平 铺 。 

@ 定义 <a> 标 签 以 块 状 或 者 行内 块 状 显示 ， 以 方便 为 超 链接 定义 高 和 宽 。 在 定义 超 链接 
的 显示 大 小 时 ， 其 宽 和 高 最 好 与 背景 图 像 保持 一 致 。 也 可 以 使 用 padding 属性 撑 开 
<a> 标 签 ， 以 代替 width 和 height 属性 声明 。 

@ 应 使 用 text-indent 属性 隐藏 超 链接 中 的 文本 。 

@ 如 果 超 链接 的 区 域 比 背景 图 像 大 , 应 使 用 background-position 属性 定位 背景 图 像 在 超 
链接 中 的 显示 位 置 。 


* 155。 
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【示例 2】 使 用 图 像 也 能 够 设计 出 富有 动态 的 超 链接 按钮 。 例 如 ， 本 示例 为 超 链接 不 同 状态 定义 
不 同 背 景 图 像 : 当 在 正常 状态 下 ， 超 链接 左 侧 显示 一 个 箭头 式 的 背景 图 像 ， 当 鼠标 指针 经 过 超 链接 
时 ， 背 景 图 像 被 蔡 换 为 男 一 个 动态 GIF 图 像 ， 使 整个 超 链 接 动态 效果 立即 显示 出 来 。 代 码 如 下 ， 演 
示 效 果 如 图 5.14 所 示 。 


<style type="text/css"> 

a.reg {/* 定义 超 链接 正常 样式 : 定位 左 侧 背景 图 像 */ 
backsground: url("1mages/arrow2.g1f") no-repeat left center:; 
padding-left:14px: 
} 

a.reg:hover {/* 定义 鼠标 指针 经 过 时 超 链接 样式 : 定位 左 侧 背景 图 像 */ 
background: url("i1mages/arrowl1.g1f") no-repeat left center: 
padding-left:14px: 
} 

</style> 


<a class="reg" hre 传 "#f'> 注 册 </a> 


Xx 
eS ro/ocatiostaos0, - a | 


KE 


图 5.14 动态 背景 图 像 超 链接 样式 


在 上 面 的 样式 表 中 ， 通 过 padding-left 属性 定义 超 链接 左 侧 空 际 ， 这 样 就 可 以 使 定义 的 背景 图 像 
显示 出 来 , 避免 被 链接 文本 所 遮 震 。 实 战 中 , 经 党 需要 使 用 padding 属性 来 为 超 链接 增加 空余 的 空间 ， 
以 便 背 景 图 像 能 够 很 好 地 显示 出 来 。 

: 在 设计 时 ， 巧 妙 地 结合 超 链 接 的 几 种 不 同 显 示 状 态 ， 为 不 同 状 态 设 计 不 同 的 背景 图 像 ， 用 户 会 
看 到 很 多 有 趣 的 效果 ， 而 且 可 以 设计 出 更 证 有 提示 性 的 超 链接 效果 。 例 如 ， 在 超 链接 左 侧 定义 一 个 
箭头 式 的 背景 图 像 ， 当 鼠标 指针 经 过 时 再 定义 箭头 图 像 显示 在 超 链接 的 右 侧 ， 这 样 就 会 给 人 一 种 错 





” 觉 ， 即 当 鼠 标 指针 经 过 时 ， 超 链接 如 同 离 弦 的 箭头 。 或 者 设计 当 超 链接 被 单 击 之 后 ， 在 超 链接 的 左 
， 侧 或 者 右 侧 显 示 一 个 对 勾 标记 ， 提 示 该 超 链接 已 经 被 访问 过 。 


5.2.7 设计 滑动 背景 样式 


在 CSS 中 ， 一 个 经 和 党 被 讨论 的 设计 技巧 就 是 背景 图 的 可 层 登 性 ， 并 允许 在 彼此 之 上 进行 滑动 ， 
以 创造 一 些 特殊 的 效果 ， 这 就 是 滑动 门 特效 。 

很 多 用 户 喜 欢 把 一 个 绘制 好 的 图 像 分 成 两 截 ， 让 其 中 的 一 截 固 定 在 超 链 接 按 钮 的 一 端 ， 男 一 截 
固定 在 男 一 端 ， 如 果 背 景 图 足够 大 的 话 ， 会 发 现 不 管 超 链接 包含 的 字数 有 多 少 ， 字 体 有 多 大 ， 它 都 
能 够 很 好 地 适应 伸缩 的 按钮 ， 使 设计 效果 总 是 显示 为 一 致 。 


i 
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图 5.15 直观 地 展示 了 可 扩展 的 图 形 按钮 的 设计 原理 。 为 了 帮助 读者 更 直观 地 理解 和 体会 ， 下 面 
结合 一 个 示例 进行 具体 讲解 。 








绘制 按钮 图 形 
切割 图 形 为 两 截 











\_ 1 
把 两 截图 形 分 别 装 入 | 







超 链接 a 元 素 框 ， 框 外 背景 图 像 不 会 显示 出 来 


图 5.15 滑动 门 设计 原理 示意 图 





【操作 步骤 】 
第 1 步 , 使 用 Photoshop 设计 好 按钮 图 形 的 效果 图 ， 然后 分 切 为 两 截 ， 其 中 一 截 应 尽 可 能 窄 ， 只 包 
括 一 条 椭圆 边 ， 男 一 截 可 以 尽 可 能 大 ， 这 样 设计 的 图 形 按钮 就 可 以 容纳 更 多 的 字符 ， 如 图 5.16 所 示 。 


图 5.16 ”绘制 并 裁 切 滑动 门 背景 图 
第 2 步 ， 局 动 Dreamweaver， 新 建 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 以 下 代码 。 构 建 


一 个 可 以 定义 重合 背景 图 的 超 链接 结构 ， 具 体 结构 如 下 ， 在 每 个 超 链接 <a> 标 签 中 包含 了 一 个 <span> 
辅助 标签 。 





<a hre 传 "#'><span> 按 钮 </span></a> 

<a hre 传 "#'><span> 超 链接 </span></a> 

<a ”hre 仁 "#"><span> 图 像 按 钮 </span></a> 

<a hre 伍 "#"><span> 扩 展 性 按钮 </span></a> 

<a ”hre 伍 "#"><span> 能 够 定义 很 多 字数 的 文本 链接 </span></a> 


第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 
的 样式 。 使 用 CSS 把 短 的 背景 图 (left1.gif) 固定 在 <a> 标 签 的 左 侧 。 


a {l* 定义 超 链接 样式 */ 
background: url('images/left1.gif) no-repeat top left: /* 把 短 截 背 景 图 像 固 定 在 左 侧 */ 


display: block:; 谍 以 块 状 显 示 ， 这 样 能 够 定义 大 小 */ 

float:left: 谍 浮动 显示 ， 这 样 a 元 素 能 够 自动 收缩 宽度 ， 以 正好 包容 文本 */ 
padding-left: 8px: /# 增加 左 侧 内 边 距 ， 该 宽度 正好 与 上 面 定义 的 背景 图 像 同 宽 */ 
font: bold 13px Arial; /* 超 链接 文本 字体 属性 */ 

line-height: 22px: /#* 定义 行 高 */ 

height: 30px: /# 定义 按钮 高 度 */ 
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color: white: /# 字体 颜色 */ 
margin-left:6px: /# 左 侧 外 边框 */ 
text-decoration:none: /* 清除 默认 的 下 划 线 样式 */ 
} 


第 4 步 ， 把 长 的 背景 图 (rightl.gif) 固定 在 <span> 标 签 的 右 侧 。 
a span { 


background: url('images/rightl.gif) no-repeat top right; ” /* 定义 长 截 背景 图 像 */ 


display: block: /#* 块 状 显 示 */ 
padding: 4px 10px 4px 2px: 谍 增加 内 边 距 */ 
} 


第 5 步 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 5.17 所 示 。 如 果 希 望 当 鼠标 指针 经 过 时 让 超 链 接 样 式 
稍稍 有 点 变化 ， 以 增加 按钮 的 动态 感 ， 不 妨 给 鼠标 经 过 时 增加 一 个 下 划 线 效果 ， 代 码 如 下 。 


a:hover { text-decoration: underline;} 


see 3 http://localhost/mysite/test ~ 盟 0 | 爷 滑动 样式 


人 





图 5.17 设计 滑动 门 链接 效果 
5.2.8 ”设计 起 链接 类 型 样式 


在 下 和 面 的 示例 中 ， 将 模拟 百度 文库 的 “相关 文档 推荐 ”模块 样式 设计 效果 ， 演 示 如 何 利用 属性 
选择 占 快 速 并 准确 匹配 文档 类 型 ， 为 不 同类 型 的 文档 超 链 接 定义 不 同 的 显示 图 标 ， 以 便 浏 览 者 准确 
识别 文档 类 型 。 示 例 演示 效果 如 图 5.18 所 示 。 


XX 

所 1 
久 移动 互联 网 

坟 克 点 吉 去 81 而 鲍 纲 
图 什么 是 移动 互联 网 

支 支 支 克 去 8 而 1M 窜 值 
图 中 国 移动 互联 网 

广 妇 妈妈 六 38F1n 宫 值 
闻 移动 互联 网 

廊 支 去 去 寺 57 


页 3 财富 值 


颗 移动 互联 网 
充 克 克 去 去 49 而 M4 富 什 





图 5.18 设计 超 链接 文档 类 型 的 显示 图 标 
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【操作 步骤 】 
第 1 步 ， 构 建 一 个 简单 的 模块 结构 。 在 这 个 模块 结构 中 ， 为 了 能 够 突出 重点 ， 忽 略 了 其 他 细节 
信息 ， 代 码 如 下 。 


<div 1d="wrap"> 





<p><a href="http://www.baidu.com/name.pdf"'> 移 动 互 联网 </a><span><img src="images/starl.jpg" /> 81 
页 免费 </span> </p> 

<p><a hre 伟 "http:/www.baidu.commame.ppt"> 什 么 是 移动 互联 网 </a><span><img src="images/starl.jpg" 
/> 8 页 1 财富 值 </span> </p> 

<p><a hre 人 "http:/www.baidu.commame.xls"> 中 国 移 动 互联 网 </a><span><img src="images/starl.jpg" 人 
38 页 1 财富 值 </span> </p> 

<p><a hre 舍 "http:/www.baidu.com/mame.txt"> 移 动 互联 网 </a> <span><img src="images/star3.jpg" /> 57 
页 5 财富 值 </span></p> 

<p><a hre 伍 "http://www.baidu.com/name.doc"> 移 动 互联 网 </a><span><img src="images/star3.jpg" /> 42 
页 2 财富 值 </span> </p> 

</div> 


第 2 步 ， 新 建 一 个 内 部 样式 表 ， 在 样式 表 中 对 案例 文档 进行 样式 初始 化 ， 代 人 码 如 下 。 


/*# 初 始 化 超 链 接 、sapn 元 素 和 p 元 素 基 本 样式 */ 

a { padding-left: 24px; text-decoration: none; } 

span { color: #999: font-size: 12px; display: block: padding-left: 24px; padding-bottom: 6px; } 
Pp { margin: 4px; } 


第 3 步 ， 利 用 属性 选择 器 为 不 同类 型 的 文档 超 链接 定义 显示 图 标 。 


a[href $="pdf"] { /* 匹 配 PDF 文件 */ 

background: url(images/pdf.jpg) no-repeat left center; 
} 
a[href $="ppt"] { /* 匹 配 演示 文稿 */ 

backsground: url(i1mages/ppt.Jpg) no-repeat left center; 
} 
a[href $="txt"] { * 匹 配 记事 本 文件 */ 

background: url(1mages/txt.jpg) no-repeat left center; 
} 
a[href $="doc"] {# 匹 配 Word 文件 */ 

background: url(i1mages/doc.jpg) no-repeat left center:; 
} 
a[href $="xls"] { /* 匹 配 Excel 文件 */ 

background: url(1mages/xls.jpg) no-repeat left center: 


“ 199 


《sss1DI 网 页 样式 名 布局 愉 入 门 到 精通 ( 微 梨 精 编 版 ) 





【拓展 】 
超 链接 的 类 型 和 形式 是 多 样 的 ， 如 销 链 接 、 下 载 链接 、 图 片 链 接 、 空 链接 、 脚 本 链接 等 ， 都 可 
以 利用 属性 选择 器 来 标识 这 些 超 链接 的 不 同样 式 ， 代 码 如 下 。 
a[href^="http:"] { * 匹 配 所 有 有 效 超 链接 */ 


background: url(i1mages/window.gif) no-repeat left center:; 
} 
a[href $="xls"] { /* 匹 配 XML 样式 表 文件 */ 
background: url(images/icon xls.gif) no-repeat left center:; 
padding-left: 18px; 
} 
a[href $="rar"] { /匹配 压缩 文件 */ 
background: url(images/icon rar.gif) no-repeat left center:; 
padding-left: 1 8px; 
} 
a[href $="gif"] { /x* 匹 配 GIF 图 像 文件 */ 
background: url(1mages/icon lmg.glf no-repeat left center: 
padding-left: 1 8px;: 
} 
a[href $="jpg"] {# 匹 配 JPG 图 像 文件 */ 
backeground: url(images/icon img.gif) no-repeat left center:; 
padding-left: 18px; 
} 
a[href $="png"] { /* 匹 配 PNG 图 像 文件 */ 
backsground: url(images/icon img.gif) no-repeat left center:; 


padding-left: 18px: 


5.3 在 线 练 习 
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使 用 CSS 美化 列表 


和 企 网 页 中 ， 大 量 的 信息 通过 列表 结构 进行 编排 ， 如 新 闻 列 表 、 导 航 列表 、 排 行列 表 、 
分 类 列表 等 ， 可 以 说 列表 是 管理 网 页 信息 最 有 效 的 方式 之 一 ， 使 用 频率 大 于 标题 文本 和 段 
落 文 本 。 本 章 将 介绍 各 种 网 页 构建 的 样式 设计 ， 如 导航 条 、 羔 单 栏 、 新 闻 栏 目 、 引 和 导 页 、 
列表 页 、 图 文 版 式 等 。 


【 学 习 要 点 】 
站 使 用 CSS 设计 列表 基本 样式 。 
| 根据 网 页 具体 内 容 编排 列表 版 式 。 











人 (sss1DI0 网 页 样式 与 市 局 从 入 门 到 精通 ( 微 课 精 编 版 ) 


6.1 列表 基本 样式 


在 默认 状态 下 网 页 列表 呈现 的 效果 是 左 侧 附 加 项 目 符号 ， 列 表 项 目 缩 进 显示 。CSS 为 列表 结构 
定义 了 4 个 专门 属性 ， 说 明 如 表 6.1 所 示 。 


表 6.1 CSS 专用 列表 属性 
属 性 说 明 
list-style 复合 属性 。 设 置 列表 项 目 相 关内 容 
list-style-image 设置 列表 项 目的 符号 图 像 
list-style-position 设置 列表 项 目 符号 的 显示 位 置 ， 根 据 文本 在 内 或 在 外 排列 ， 取 值 包括 inside 和 outside 
list-style-type 设置 列表 项 目 符号 的 类 型 





6.1.1 定义 项 目 符号 
CSS 使 用 list-style-type 属性 定义 列表 项 目 符号 的 类 型 ， 该 属性 取 值 说 明 如 表 6.2 所 示 。 


表 6.2 list-style-type 属性 值 
属 性 值 属 性 值 说 明 
disc 实心 圆 ， 默 认 值 upper-roman 大 写 罗马 数字 
circle lower-alpha 小 写 英 文字 母 
square upper-alpha 写 英 文字 母 
decimal 不 使 用 项 目 符号 
lower-roman armenian 传统 的 亚美尼亚 数字 


cjk-ideographic 浅 白 的 表意 数字 georgian 传统 的 乔治 数字 
]ower-greek 基本 的 希腊 小 写字 母 hebrew 传统 的 希 伯 来 数字 
hiragana hiragana-iroha 日 文平 假名 序号 
katakana katakana-iroha 日 文 片 假名 序号 
lower-latin upper-latin 大 写 拉 丁字 母 


CSS 使 用 list-style-position 属性 定义 项 目 符号 的 显示 位 置 。 该 属性 取 值 包括 outside 和 inside， 其 
中 outside 表示 把 项 目 符 号 显示 在 列表 项 的 文本 行 以 外 ， 列 表 符 号 默认 显示 为 outside，inside 表示 把 
项 目 符号 显示 在 列表 项 文本 行 以 内 。 

【示例 】 本 示例 定义 项 目 符 号 显示 为 空心 贺 ， 位 于 列表 行内 部 。 代 码 如 下 ， 效 果 如 图 6.1 所 示 。 

















<style type="text/css"> 
body {/* 清除 页 边 距 */ 
Iargln: 0; he 清除 边界 pe 


-Oe 
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padding: 0; /* 清除 补 白 */ 

} 

ul {l* 列表 基本 样式 */ 
list-style-type: circle; /# 空心 圆 符 号 */ 
list-style-position: inside: /# 显示 在 里 面 */ 
} 

</style> 

<ul> 
<]i><a hre 伍 "#"> 新 闻 </a></li> 
<]li><a hre 伍 "#"> 社 区 </a></li> 


<]i><a hre 住 #"> 微 博 </a></li> 
<]i><a hre 住 #"> 微 信 </a></li> 
</ul> 


x 
a 全 http://localhost/m 只 ~ 呈 0 | 全 列表 样式 X 





图 6.1 定义 列表 项 目 符号 


项 目 符号 显示 在 里 面 和 外 面 会 影响 项 目 符号 与 列表 文本 之 间 的 距离 ， 同 时 影响 列表 项 的 缩 进 效 
果 。 不 同 浏览 器 在 解析 时 会 存在 差异 。 


6.1.2” 自 定义 项 目 符号 


使 用 CSS 的 list-style-image 属性 可 以 自 定义 项 目 符 号 。 该 属性 允许 指定 一 个 外 部 图 标 文 件 ， 以 | ed gt 
此 满足 个 性 化 设计 需求 。 用 法 如 下 。 





list-style-1mage: none |<url> 


默认 值 为 none。 
【示例 】 以 6.1.1 节 示 例 为 基础 ， 增 加 自 定义 项 目 符 号 。 代 码 如 下 ， 效 果 如 图 6.2 所 示 。 
body {/* 清除 页 边 距 */ 

margin: 0; /* 清除 边界 */ 

padding: 0; /* 清除 补 白 */ 
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ul {/* 列表 基本 样式 */ 


list-style-type:circle: /# 空心 圆 符 号 */ 
list-style-position:inside: /*# 显示 在 里 面 */ 
list-style-image:url(images/bullet disk.gif); /* 自 定义 列表 项 目 符号 */ 





图 6.2 目 定 义 列 表 项 目 符号 


写 提示 : 当 同 时 定义 项 目 符号 类 型 和 自 定义 项 目 符号 时 ， 自 定义 项 目 符号 将 覆盖 默认 的 符号 类 型 。 
但 是 如 果 list-style-type 属性 值 为 none 或 指定 外 部 文件 不 存在 时 ， 则 list-style-type 属性 值 
有 效 。 


6.1.3 ”使 用 背景 图 像 设 计 项 目 符 号 


使 用 背景 图 定义 项 目 符号 的 技巧 如 下 。 

第 一 ， 先 隐藏 列表 结构 的 默认 项 目 符号 。 方 法 是 设置 list-style-type:none。 

第 二 ， 为 列表 项 定义 背景 图 像 ， 指 定 要 显示 的 项 目 符号 ， 利 用 背景 图 精确 定位 技术 控制 其 显示 
位 置 。 同 时 增加 列表 项 左 侧 空 白 ， 避 人 免 背景 图 被 列表 文本 遮 新 。 

【示例 1】 在 本 示例 中 ， 先 清除 列表 的 默认 项 目 符 号 ， 然 后 为 项 目 列表 定义 背景 图 像 ， 并 定位 到 
左 侧 垂直 大 中 的 位 置 ， 为 了 避免 列表 文本 履 盖 背景 图 像 ， 定 义 左 侧 补 白 为 一 个 字符 宽度 ， 这 样 就 可 
以 把 列表 信息 同 右 缩 进 显示 。 代 人 码 如 下 ， 显 示 效 果 如 图 6.3 所 示 。 


body {/* 清除 页 边 距 */ 
margin: 0: /# 清除 边界 */ 
padding: 0: /# 清除 补 白 */ 

} 

li tl* 定义 列表 项 目的 样式 */ 
background-image:url(images/bullet sarrow.gif); 。”/* 定义 背景 图 像 */ 


background-position:left center: /* 精确 定位 背景 图 像 的 位 置 */ 
background-repeat:no-repeat: /# 禁止 背景 图 像 平 铺 显示 */ 
padding-left: lem: /# 为 背景 图 像 挤 出 空白 区 域 */ 


.164 。 








图 6.3 使 用 背景 图 像 设 计 项 目 符号 


【示例 2】 本 示例 结合 超 链接 的 交互 状态 ， 设 计 出 富有 动态 效果 的 项 目 符 号 。 代 码 如 下 ， 效 果 如 


图 6.4 所 示 。 


ut 
padding: 0; 
margin: 0: 
list-style: none: 
border-bottom: 1px dashed #aaa; 
width:20em: 
} 
li {padding: 0.Sem: border-top: 1px dashed #aaa:} 
la {/* 超 链接 样式 */ 
display:block: 
padding-left:1.Sem:; 
background:url(1mages/arrow3.g1f) left center no-repeat; 
text-decoration: none; 
} 
lia:link {/* 定义 未 访问 超 链接 背景 图 像 */ 
background:url(1mages/arrow3.g1f) right center no-repeat; 
} 
li a:visited {/* 定义 已 访问 超 链接 背景 图 像 */ 
background:url(1mages/arrow8.g1f) right center no-repeat; 
} 
li a:hover {/* 定义 鼠标 指针 经 过 超 链 接 背 景 图 像 */ 
background:url(1mages/arrow4.g1f) left center no-Tepeat: 


se 
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上 # 固定 项 目 列表 的 宽度 */ 


/* 块 状 显 示 */ 

此 为 背景 图 像 显示 挤 出 位 置 */ 
谍 固定 背景 图 像 在 左 侧 */ 

/# 清除 超 链接 的 下 划 线 */ 


上 # 固定 背景 图 像 在 左 侧 */ 


/# 蔡 换 左 侧 背 景 图 像 */ 


/* 固定 背景 图 像 到 右 侧 */ 
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Sl Er TE 
鼠标 指针 经 过 的 


项 目 图 标 样式 
正常 显示 时 超 链 


接 项 目 图 标 样 式 





已 访问 的 项 
目 图 标 样式 





图 6.4 动态 图 形 项 目 列表 符 号 
62 案例 实战 


下 面 通过 几 个 案例 演示 列表 样式 在 栏目 设计 中 的 具体 应 用 。 


6.2.1 设计 堆 生 样式 


0 | 列表 结构 默认 显示 为 堆 靶 样式 ， 并 以 缩 进 版 式 进行 显示 。 这 是 一 种 符合 浏览 习惯 的 布局 效果 。 
， 在 新 闻 列 表 、 分 类 列表 等 列表 页 或 栏目 中 比较 常见 。 
【示例 1】 本 示例 演示 了 列表 结构 垂直 布局 的 基本 形式 。 
第 1 步 ， 清 除 列 表 结 构 的 默认 样式 ， 如 列表 项 目 符号 、 缩 进 显 示 格 式 等 。 
第 2 步 , 定义 列表 项 目的 宽度 和 高 度 , 定义 其 包含 的 <a> 标 签 以 块 状 显示 , 设置 对 应 的 宽度 和 高 度 。 
第 3 步 ， 使 用 背景 色 、 字 体 颜色 和 边框 颜色 等 要 素 设 计 视 觉 变 化 效果 ， 营 造 鼠 标 指针 经 过 的 动态 效 
果 。 代 码 如 下 ， 演 示 效 果 如 图 6.5 所 示 。 





<style> 
body { background-color: #deeOff: } 
#menu {/* 栏目 包含 框 样式 */ 
width: 150px:; 
font-family: Arial: font-size: 14px; text-align: right 


} 
#menu ul {/* 列表 外 框 样式 */ 
list-style-type: none: /# 不 显示 项 目 符号 */ 
margin: Opx; /# 清除 边界 */ 
padding: Opx:; /# 清除 补 白 */ 
} 
#menu li { border-bottom: 1px solid #9F9FED:} /# 添加 下 划 线 */ 
#menulia { 
display: block: /* 块 显示 */ 
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height: lem: /# 定义 行 高 */ 
padding: Spx Spx Spx 0.Sem: 谍 增加 内 部 空隙 */ 
text-decoration: none: /# 清除 下 划 线 */ 
border-left: 12px solid #1S15S71: /# 左边 的 粗 边 */ 
border-right: 1px solid #151571: 诺 右 侧 阴影 */ 

} 

#menu li a:link, #menu li a:visited {/* 鼠标 指针 经 过 时 样式 */ 
background-color: #1136c1; /#* 背景 色 */ 
color: #FFFFFF: /* 前 景色 */ 

} 

#menu li a:hover { /# 鼠标 指针 经 过 时 */ 
background-color: #002099; /# 改变 背景 色 */ 
color: #ffff00: /# 改变 文字 颜色 */ 
border-left: 12px solid yellow: /# 底部 增加 亮 边 */ 

} 

</style> 


<div 1d="menu"> 
<h1> 网 站 导航 </h1> 
<ul> 
<]i><a hre 伍 "#" title=""> 软 件 工程 </a></li> 
<]i><a hre 伍 "#" title=""> 编 程 语言 </a></li> 
<]i><a hre 伍 "#" title=""> 软 件 设计 </a></li> 
<]i><a hre 伍 "#" title="">Web 前 尊 </a></li> 
<]i><a hre 伍 "#" title=""> 手 机 开发 </a></li> 
<]i><a hre 伍 "#" title=""> 所 有 随笔 </a></li> 
</ul> 
</div> 


CE ES http://localhost3080, ~ BO E localhost 


所 有 随笔 





图 6.5 列表 堆 登 样式 





6.2.2 设计 水 平 排列 梓 陈 
第 一 种 ， 定 义 列表 项 目 为 行内 显示 ， 设 计 所 有 列表 项 目 在 同一 行内 显示 。 视频 


* 167， 





Cssipyy 网 页 样式 名 过 局 以 入 门 到 精通 (条 银 精 访 版) 


【示例 1】 本 示例 是 在 6.2.1 节 示 例 基础 上 ， 把 牌 直 堆 释 形 式 转换 为 水 平 布局 形式 。 
首先 ， 把 列表 项 目 定义 为 行内 显示 ; 然后 ， 使 用 补 日 “padding) 定义 列表 项 目的 宽度 和 高 度 ， 
。 因为 width 和 height 属性 对 于 行内 元 素 是 无 效 的 ; 最 后 ， 利 用 背景 色 、 边 框 样式 和 字体 颜色 设计 超 链 
， 接 的 动态 效果 。 代 码 如 下 ， 演 示 效 果 如 图 6.6 所 示 。 
body { background-color: #deeOff: } 
#menu {font-family: Arial; font-size: 14px; } 
#menu ul {/* 列表 外 框 样式 */ 


list-style-type: none: /# 不 显示 项 目 符号 */ 
margin: Opx; /# 清除 边界 */ 
padding: 0px: /# 清除 补 白 */ 

} 

区 nenu ll { 
border-bottom: 1px solid #9F9FED:; /* 添加 下 划 线 */ 
display: inline: /# 行内 显示 */ 

} 

#menulia { 
padding: 8px 8px 12px lem: /*# 通过 padding 撑 开 列表 项 目 */ 
text-decoration: none: /# 清除 下 划 线 */ 
border-left: 12px solid #151571:; 谍 左边 的 粗 边 */ 
border-right: 1px solid #151571: 谍 右 侧 阴影 */ 

} 


#menu li a:link, #menu li a:visited {/* 己 经 访问 过 样式 */ 
background-color: #1136c1; 


color: #FFFFFF: 

} 

#menu li a:hover { /# 鼠标 指针 经 过 时 样式 */ 
background-color: #002099; /# 改变 背景 色 */ 
color: #ffff00: /# 改变 文字 颜色 */ 
border-left: 12px solid yellow:; 

} 


x 


和 -> 过 http://localhost:8080/mysite/test1.html 了 人 [ed 总 localhost x 是 从 兢 这 


Web 前 端 所 有 随 莹 





图 6.6 水 平 布 局 列表 样式 
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第 二 种 ， 使 用 浮动 显示 列表 项 目 ， 设 计 水 平 布局 。 
【示例 2】 本 示例 将 以 浮动 方式 设计 导航 菜单 。 代 码 如 下 ， 演 示 效 果 如 图 6.7 所 示 。 





body { background-color: #deeOff:; } 
#menu {font-family: Arial; font-size: 14px; } 
#menu ul {/* 列表 外 框 样式 */ 





list-style-type: none: /# 不 显示 项 目 符 号 */ 
margin: Opx: /# 清除 边界 */ 
padding: 0px: /# 清除 补 白头 

} 

#menuli{ 
border-bottom: 1px solid #9F9FED: /# 添加 下 划 线 */ 
float: left; 上 # 定义 列表 项 目 向 左 浮动 显示 */ 

} 

#menulia { 
width: 120px: /# 定义 超 链 接 宽 度 */ 
display: block: /# 定义 块 显 示 */ 
height: lem:; /# 定义 行 高 */ 
padding: Spx Spx Spx 0.Sem: /# 增加 内 部 空隙 */ 
text-decoration: none: /# 清除 下 划 线 */ 
border-left: 12px solid #151571: 谍 左边 的 粗 边 */ 
border-right: 1px solid #151571:; 谍 右 侧 阴影 */ 

} 


#menu li a:link, #menu li a:visited {/* 已 经 访问 过 样式 */ 
background-color: #1136c1: 


color: #FFFFFF: 

} 

#menulia:hover{  ”/ 济 鼠标 指针 经 过 时 */ 
background-color: #002099: /#z 改变 背景 色 */ 
color: #ffff00: /# 改变 文字 颜色 */ 
border-left: 12px solid yellow'; 

} 


“二 一 心 http://localhost-B 3U/rmmy site/testo.htm v 全 已 已 localhost 





软件 工程 
手机 开发 





图 6.7 水 平 布局 列表 结构 
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安 提示 : 为 了 解决 浮动 存在 的 列表 框 自动 收缩 问题 , 上 面 示例 把 列表 框 ( <ul> 标 签 )、 列 表 项 ( <li> 
标签 ) 和 超 链接 ( <a> 标 签 ) 都 定义 为 浮动 显示 ( float: left ) ， 简 化 列表 框 自动 收缩 所 带 


来 的 复杂 问题 。 
7 6.2.3 设计 菜单 样式 


本 节 案 例 通过 CSS 背景 图 设计 一 蒜 菜 单 样式 ， 定 义 当 鼠标 指针 移 到 菜单 上 时 会 显示 男 一 种 背景 
图 ， 演 示 效 果 如 图 6.8 所 示 。 








二 mal SB http://localhost/mysite/index.htn 


我 的 相册 我 的 日 志 我 的 音乐 意 








图 6.8 设计 个 人 网 站 菜单 演示 效果 


【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建 网 页 并 保存 为 Index.html。 打 开 网 页 文档 ， 设 计 如 下 导航 菜单 
结构 。 


<ul class="menu"> 
<li class="top"><a href="#" class="top link"><span> 首 页 </span></a></li> 
<li class="top"><a hre 人 f="#" class="top link"><span> 我 的 相册 </span></a></li> 
<li class="top"><a href="#" class="top link"><span> 我 的 日 志 </span></a></li> 
<li class="top"><a hre 人 人 ="#/" class="top_link"><span> 我 的 音乐 使 </span></a></li> 
<li class="top"><a href="#" class="top link"><span> 我 的 介绍 </span></a></li> 
<li class="top"><a href="#" class="top link"><span> 留 言 本 </span></a></li> 


</ul> 
在 这 个 导航 菜单 中 ,包含 两 层 结构 ， 外 层 的 <ul> 标 签 控制 导航 总 体 样 式 ， 内 层 的 <li> 标 签 控制 每 
个 菜单 项 的 样式 。 


第 2 步 ， 为 了 与 页 面 其 他 模块 的 列表 结构 进行 区 分 ， 在 该 导航 菜单 中 定义 外 层 的 <ul> 标 签 类 名 
为 menu， 内 层 的 <li> 标 签 类 名 为 ttp， 每 个 选项 中 包含 的 超 链接 类 名 为 top_link。 

第 3 步 ， 新 建 CSS 样式 表 文 件 ， 命 名 为 style.css， 保 存 到 images 文件 夹 中 ， 然 后 在 页 面 头 部 区 
域 导 入 该 样式 表 ， 代 码 如 下 。 


<link rel="stylesheet" hre 传 "images/style.css" type="text/css" /> 


第 4 步 ， 设计 菜单 框架 样式 ， 控 制 整个 导航 菜单 外 观 。 这 里 主要 通过 类 选择 器 .menu 实现 ， 样 式 
细节 包括 : 设置 内 外 边 距 ， 固 定 高 度 为 40 像素 ， 清 除 列表 框 默认 样式 〈 如 项 目 符 号 、 缩 进 )， 定 义 
背景 效果 ， 设 置 字体 样式 ， 设 计 外 框 为 相对 定位 〈position:relative; )， 代 码 如 下 。 
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.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px:; background:#fff url(buttonla.gif) Tepeat-X: 


position:relative; font-family:arial, verdana, sans-serif; margin-top:S0px;} 


其 中 ，position:relative; 声 明 对 于 整个 案例 效果 的 影响 最 为 天 键 , 它 能 够 约束 内 部 结构 的 布局 ， 关 
于 position 属性 的 深入 讲解 请 参阅 后 面 章节 。 

第 5 步 ， 以 包含 选择 器 的 方式 匹配 每 个 列表 项 ， 然 后 定义 每 个 列表 项 以 块 状 显 示 ， 并 同 左 浮动 ， 
实现 横向 并 列 显示 效果 ， 代 码 如 下 。 


.menu li.top {display:block; float:left; position:relative;} 


注意 ， 这 里 使 用 包含 选择 器 ， 限 制 匹 配 范围 为 导航 菜单 框 内 ， 然 后 使 用 指定 范围 类 样式 ， 以 使 
提高 类 样式 的 优先 级 ， 以 及 确定 样式 应 用 的 标签 类 型 范围 。 

第 6 步 ， 通 过 多 层 包 含 选择 器 定义 选项 中 超 链接 的 样式 。 设 置 每 个 超 链 接 以 块 状 、 同 右 浮动 显 
示 ， 然 后 定义 高 度 ， 与 导航 栏 同 高 ， 定 义 菜 单 内 字体 样式 等 ， 代 码 如 下 。 

.menu li a.top link {display:block: float:left: height:40px: line-height:33px:; color:#bbb: text-decoration:none:; 
font-size:] 1px; font-weight:bold; padding:0 0 0 12px; cursor:pointer:;} 


第 7 步 , 继续 以 多 层 包 含 选择 器 定义 超 链接 中 包含 的 span 元 素 样式 , 该 样式 与 超 链接 样式 相似 ， 
代码 如 下 。 

.menu li atop link span {float:left: font-weight:bold; display:block: padding:0 24px 0 12px; height:40px:} 

第 8 步 ， 以 伪 类 选择 器 方式 定义 鼠标 经 过 超 链 接 的 样式 。 该 效果 主要 包含 两 个 样式 ， 它 们 分 别 
定义 a 和 span 元 系 样 式 。 在 样式 中 主要 重 设 背景 图 像 和 位 置 ， 代 码 如 下 。 


.menu li atop link:hover {fcolor:#000: background: Url(button4.glb no-repeat:} 
.menu li a.top link:hover span {background:url(button4.gif) no-repeat right top:;} 


第 9 步 ， 以 选择 器 分 组 的 方式 定义 导航 菜单 中 的 公共 样式 ， 如 初始 化 由 默认 效果 ， 考 虑 到 在 不 
同位 置 、 不 同 状态 下 的 由 样式 ， 这 里 采用 了 选择 需 分 组 的 方式 统一 进行 控制 ， 代 码 如 下 。 


.Denu ul, 

.menu :hover ul ul, 

.menu :hover ul :hover ul ul, 

.nenu :hover ul :hover ul :hover ul ul, 

.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px: top:-9999px:; width:0; height:0; 
margin:0; padding:0; list-style:none;} 


其 他 样式 以 及 整个 案例 效果 请 参阅 本 节 实 例 源 代码 。 
6.2.4 设计 导航 条 
本 节 案 例 利 用 背景 图 像 设 计 导 航 条 ， 通 过 背景 图 像 的 衬托 使 导航 列表 显得 醒目 、 有 立体 感 ， 有 具 


A 
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有 Vista 系统 的 超 酷 效果 ， 如 图 6.9 所 示 。 


Xx 
Ce Shes/ocahosta000/my: ~ BC sa “> 状 攻 玫 于 


首页 CSS eb 设 1 吏 动 开发 





图 6.9 使 用 背景 图 像 设计 导航 条 


【操作 步骤 】 

第 1 步 ， 启 动 Photoshop， 设 计 背 景 图 像 。 可 以 在 Photoshop 中 使 用 渐变 工具 绘制 椭圆 条 状 形 ， 
然后 利用 选取 工具 分 别 选取 上 下 部 分 ， 分别 应 用 曲线 工具 把 上 半 部 分 调 训 ， 把 下 半 部 分 调 瞳 即 可 ， 
也 可 以 利用 图 层 样 式 ， 并 借助 营 加 等 功能 完善 这 种 立体 效果 。 图 像 设 计 得 越 形 象 ， 所 设计 的 导航 条 
也 就 越 逼 真 。 本 案例 设计 了 3 个 背景 图 像 ， 如 图 6.10 所 示 。 

四 一 
正常 显示 背景 图 像 ”鼠标 指针 经 过 时 显示 的 背景 图 像 当前 按钮 显示 背景 图 像 
图 6.10 设计 导航 条 所 用 的 背景 图 像 


第 2 步 ， 新 建文 档 ， 构 建 该 导航 条 的 HIML 结构 框架 ， 为 了 方便 控制 背景 图 像 ， 在 列表 项 <li> 
标签 中 包含 了 一 个 辅助 元 素 b， 代 码 如 下 。 


<ul class="menu"> 
<li class="current"><a hre 人 ="#"><b> 首 页 CSS</b></a></li> 
<]i><a hre 仁 "#"><b> 新 闻 资讯 </b></a></li> 
<]i><a hre 伍 "#"><b> 互 动 平 台 </b></a></li> 
<]li><a hre 伍 "#"><b>Web 设计 </b></a></li> 
<]i><a hre 伍 "#"><b> 移 动 开 发 </b></a></li> 
</ul> 


第 3 步 ， 在 头 部 区 域 <head> 标 签 内 添加 <style> 标 签 ， 新 建 内 部 样式 表 。 使 用 CSS 控制 导航 条 显 
示 ， 人 代码 如 下 。 


body { background-color: #dee0ft padding:0: margin:0; } 


.menu { 
padding:0 0 0 lem: /# 在 导航 条 左 侧 增 加 1 个 字 大 小 的 间距 */ 
margin:0; 谍 清除 默认 缩 进 样式 */ 
list-style:none:; /# 清除 项 目 符号 */ 
height:35px: /# 固定 导航 条 高 度 */ 
background:url(images/bg3.gif); ”/* 定义 导航 条 的 背景 图 像 */ 

} 


i 
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第 4 步 ， 定 义 列表 项 浮动 显示 ， 设 计 水 平 显示 ， 代 码 如 下 。 
.menu li {float:left;} 


第 5 步 ， 定 义 菜 单项 的 显示 样式 ， 设 置 超 链接 以 块 状 显 示 ， 并 固定 大 小 ， 设 置 菜单 文本 显示 属 
性 ， 代 码 如 下 。 





.menulia { 
display:block: /* 块 状 显 示 */ 
float:left: /# 问 左 浮动 */ 
height:3Spx: /# 与 导航 条 同 高 */ 
line-height:33px:; /# 垂直 对 齐 文 本 */ 
color:#FFFFO00: /# 设置 粉红 色 字 体 颜 色 */ 


text-decoration:none: 
font-family:arial, verdana, sans-seTlf 
text-align:center; 

padding:0 0 0 14px: 

cursor:pointer:; 


font-size: 1 1px;: 


} 
第 6 步 ， 设 置 a 元 素 所 包含 的 辅助 元 素 也 为 块 状 浮动 显示 ， 这 样 为 后 面 进行 控制 提供 保障 ， 代 
人 码 如 下 。 


.menuliabt{ 
float:left: 
display:block: 
padding:0 28px 0 14px; 
} 


第 7 步 ， 定 义 当 前 菜单 的 显示 样式 ， 代 码 如 下 。 所 谓 当 前 菜单 就 是 被 激活 的 菜单 ， 也 就 是 当前 
页 面 为 当前 菜单 指 同 的 链接 。 定 义 当 前 菜单 样式 是 为 了 更 好 地 区 分 菜单 状态 。 


.menu li.current a { 
color:#fff: 
background:url(i1mages/left3.g1f); 
} 


.menu li.current ab {/* 定义 当前 菜单 的 背景 图 像 */ 
background:url(1mages/left3.g1f) no-repeat right top; 


} 


上 面 分 别 在 a 和 元 系 中 同时 定义 相同 的 背景 图 像 ， 利 用 背景 图 像 重 登 来 伪造 圆 角 按钮 效果 。 


/# 向 左 浮动 */ 
/# 块 状 显 示 */ 
/* 增加 左右 两 侧 的 内 边 距 */ 


上 # 清除 默认 样式 下 划 线 */ 
上 # 字体 属性 */ 

上 # 水 平 对 齐 文本 */ 

谍 增加 左 侧 空隙 */ 

上 # 定义 手 形 鼠 标 指 针 */ 

上 # 字体 大 小 */ 


= 
上 # 定义 当前 菜单 的 背景 图 像 */ 


“i 
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如 果 仅 定义 a 元 素 的 背景 图 像 ， 这 时 会 看 见 当 前 按钮 右 侧 显示 为 直角 效果 ， 而 不 是 与 左 侧 对 应 的 圆 
角 ， 如 图 6.11 所 示 。 





A 6.11 仅 定义 一 个 背景 图 像 的 效果 
通过 为 两 个 重合 的 元 素 定 义 相 同 的 背景 图 像 ， 一 个 从 左 侧 开始 向 右 侧 延 伸 ， 男 一 个 从 右 侧 向 左 
侧 平 铺 。 由 于 是 背景 图 像 ， 中 间 多 余 的 区 域 会 被 目 动 隐 藏 ， 这 样 就 给 和 一 种 错觉 ， 所 显示 的 按钮 是 
圆 角 效果 ， 演 示 示 意图 如 图 6.12 所 示 。 





EE 







Eee 


图 6.12 圆 角 背景 图 像 的 设计 示意 图 
第 8 步 ， 定 义 鼠 标 指针 经 过 时 的 样式 。 设 计 思 路 与 上 面 的 方法 相同 ， 就 不 再 重复 说 明 ， 代 码 如 下 。 


.menu li.current a:hover { 


color:#fff: /# 白色 字体 */ 
background: url(images/left 3.gif): /# 定义 鼠标 指针 经 过 的 背景 图 像 */ 
cursor:default: /* 定义 手 形 鼠 标 样 式 */ 

} 

.menu li.current a:hover b { /# 定义 鼠标 指针 经 过 的 背景 图 像 */ 
background:url(1mages/left 3.g1f) no-repeat right top: 

} 


6.2.5 设计 下 拉 菜 单 


本 节 案 例 演示 如 何 利用 CSS 技术 ， 并 适当 借助 JavaScript 脚本 控制 下 拉 荣 单 的 显示 和 隐藏 ， 演 
示 效 果 如 图 6.13 所 示 。 





| SS http://localhost8080/mysite/testhtml ~ @© | Elocalhost 
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CSS Zen Garden 


The Beauty of CSS Design 





图 6.13 下 拉 菜 单 演示 效果 


.174 。 
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【操作 步骤 】 
第 1 步 ， 首 先 构建 一 个 下 拉 菜 单 结构 ， 代 码 如 下 。 





这 是 一 个 骨 套 的 二 级 项 目 列表 ， 外 层 项 目 列表 负责 组 织 主 菜 单 ， 内 层 项 目 列表 负责 管理 子 蘑 单 ， 
当然 也 可 以 在 此 基础 上 进一步 扩展 。 该 项 目 列表 结构 插入 案例 模板 的 头 部 区 域 确 部 。 
第 2 步 ， 新 建 内 部 样式 表 ， 然 后 开始 编写 样式 。 为 该 导航 条 结构 定义 样式 ， 代 码 如 下 。 





A 








《sss1DI 网 页 样式 包 布局 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


html>/**/body jav { /* 兼容 非 正 浏览 器 */ 
left: 40px: 涯 左 侧 距离 */ 
top: 112px: /# 顶部 距离 */ 


} 


这 里 使 用 了 一 个 兼容 技术 ， 选 择 符 html>/**/body #nav 能 够 限制 该 样式 仅 在 非 下 浏览 器 中 被 解 
析 。 由 于 正 浏 览 器 与 非 正 浏览 器 在 解析 复杂 定位 时 〈 包 含 多 个 定位 包含 框 的 时 候 )， 会 存在 判断 标 


准 的 不 同 ， 导 致 解析 结果 存在 很 大 差异 。 


第 3 步 ， 清 除 项 目 列 表 和 超 链 接 的 默认 样式 ， 代 码 如 下 。 


#nav ul { margin:0px: padding:0px: } 
#nav li a { text-decoration:none; } 


/* 清除 缩 进 */ 
/# 清除 下 划 线 */ 


第 4 步 ， 让 列表 项 浮动 并 列 显 示 ， 并 定义 主 菜 单 的 显示 样式 ， 代 码 如 下 。 


#navlif{ 
list-style:none; 
text-align:center: 
font-weight:bold: 
float:left: 

} 


第 5 步 ， 定 义 下 拉 子 菜单 的 显示 样式 ， 


#nav .list { 
line-height:20px; 
text-align:left: 
padding:2px; 
font-weight:normal; 
} 

#nav .lista { 
color:#FF3AC!1: 
text-decoration:none: 
float:left: 
width: 100px:; 
padding:3px Spx Opx Spx:; 

} 


/# 清除 项 目 符号 */ 
/# 居中 对 齐 */ 
/#* 加 粗 显示 */ 
/# 回 左 浮动 和 


代码 如 下 。 


fp 


启 行 高 */ 
/#z 左 对 齐 */ 
/# 内 边 距 */ 
/# 正常 字体 ， 不 加 粗 显示 */ 


/# 下 拉 子 菜单 中 超 链接 字体 颜色 */ 

/# 清除 下 划 线 */ 

/# 浮动 超 链接 显示 ， 这 样 可 以 定义 宽 和 高 */ 
/# 超 链 接 的 宽度 */ 

诺 内 边 距 */ 


第 6 步 ， 定 义 鼠 标 指针 经 过 子 某 单 时 显示 的 样式 ， 代 码 如 下 。 


#nav .list a:hover { 


color:white: 


上 # 字体 颜色 */ 


相让 村 





padding:3px 3px Opx 20px; 

width:88px:; 

background-color:#FF3AC!1: 
} 


第 7 步 ， 定 义 两 个 类 样式 ， 设 计 当 鼠标 指针 经 过 和 离开 主 菜 单 时 所 要 应 用 的 样式 ， 代 码 如 下 。 


#nav .menul { 
width:120px: 
height:auto; 
margin:6px 4px Opx Opx:; 
border: 1px solid #FF3AC!1:; 
background-color:#F 1|FBEC: 
color:#FF3AC!1: 
padding:6px Opx Opx Opx:; 
cursor:hand: 
overflow-y:hidden: 
filter:Alpha(opacity=70); 
-moz-opacity:0.7; 

} 

#nav .menu2 { 
width:120px; 
height: ] 8px; 
margin:6px 4px Opx Opx; 
background-color:#FSFSFS:; 
color:#999999: 
border: 1px solid #EEE8DD: 
padding:6px Opx Opx Opx: 
overflow-y:hidden: 
cursor:hand: 


} 
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席 内 边 距 */ 
/# 宽度 */ 
/* 背景 色 * 





/# 主 菜单 的 宽度 */ 

/# 主 菜 单 的 高 度 ， 自 动 */ 
谍 增加 外 边 距 */ 

/z 设置 一 个 边框 所 

/#z 定义 背景 色 */ 

/# 字体 颜色 */ 

谍 定义 内 边 距 */ 

/# 定义 鼠标 指针 样式 ， 手 形 */ 
/# 隐藏 y 轴 超 出 的 区 域 */ 
/#z 在 正 下 设置 透明 度 */ 
/#z 在 非 正 下 设置 透明 度 */ 


第 8 步 ， 定 义 完毕 两 个 类 样式 之 后 ， 就 可 以 在 主 菜 单 标 签 中 的 属性 事件 中 引用 这 两 个 类 样式 ， 


代码 如 下 。 


<l1i class="menu2" onMouseOver="this.class Name='menul"" onMouseOut="this.class Name='menu2""> 


6.2.6 ”设计 折 色 导航 面板 
本 例 演示 如 何 利 用 CSS 设计 一 球 折 共 导 航 和 面板 ， 演 示 效 果 如 图 6.14 所 示 。 实 际 上 ， 本 例 就 是 一 


本 
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个 下 拉 沫 单 ， 只 不 过 仅 包 含 一 个 染 音 项目， 如果 读 者 感 兴趣 ， 可 以 扩展 多 个 列表 项 目 ， 那 样 承 会 形 
成 一 个 下 拉 菜 单 样式 。 


XX 


Ed ES http://localhost:3080, ~ 及 地 


XxX 


| ES http://localhost:8080, ~ 久 © 


网 站 导航 
» 首页 


> 
| 全 


互动 平台 





收缩 状态 展开 状态 
图 6.14 折 著 导航 面板 


【操作 步骤 】 

第 1 步 ， 构 建 导 航 结构 。 这 是 一 个 内 套 的 列表 结构 ， 外 层 为 无 序列 表 ， 内 层 是 定义 列表 。 为 了 
能 够 兼容 早期 下 浏览 器 ， 这 里 使 用 正 条 件 语句 做 向 下 兼容 修补 ， 使 下 6 和正 7 能 够 正确 啊 应 鼠标 
行为 ， 代 码 如 下 。 


<ul 1d="menu"> 
<]1> 
<!--[iflte IE 6]><a href="#nogo"><table><tr><td><![endif]--> 
<dl> 
<dt class="orange"><a hre 伍 "#"> 网 站 导航 </a></dt> 
<dd><a hre 伍 "#"> 肖 页 </a></dd> 
<dd><a hre 伍 "#"> 新 闻 资 讯 </a></dd> 
<dd><a hre 伍 "#"> 关 于 我 们 </a></dd> 
<dd class="last"><a hre 人 f="#"> 互 动 平 台 </a></dd> 
</dl> 
<!--[lflte IE 6]></td></tr></table></a><![endif|--> 
</li> 
</ul> 


第 2 步 ， 新 建 内 部 样式 表 ， 然 后 开始 编写 样式 。 为 外 层 列表 结构 定义 样式 ， 代 码 如 下 。 


#menu {/* 整体 设置 */ 
margin: 0; paddimg: 0; 
list-style-type: none; 
font: 14px Arial:; 

} 

#menuli{ 


本 
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第 3 步 ， 为 内 层 的 列表 结构 定义 样式 ， 代 码 如 下 。 


第 4 步 ， 设 置 菜单 项 dt 的 样式 ， 代 码 如 下 。 


第 5 步 ， 设 置 菜单 项 dd 的 样式 ， 代 码 如 下 。 











机 
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background: #47a url(1mages/arrow.gif) no-repeat 10px 10px; 
height: lem:; 

} 

第 6 步 ， 默 认 状 态 下 关闭 子 菜 单 ， 代 码 如 下 。 


#menu li dd { display: none: } 


第 7 步 ， 设 置 鼠 标 啊 应 ， 代 码 如 下 。 


#menu li:hover dd, #menu li a:hover dd { display: block: } 
#menu li:hover, #menu l1 a:hover { border: 0; }/*1ie6*/ 
#menu li dd a:hover { background: #147:; color: #9cf:} 


6.2.7 ”设计 市 提示 信息 的 菜单 


本 例 设 计 一 款 自 动 显 示 提 示人 信息 的 菜单 ， 这 是 一 个 很 实用 的 效果 。 当 鼠标 指针 经 过 某 一 个 莱 单 
项 的 时 候 ， 在 菜单 右 侧 会 出 现 一 个 矩形 区 域 ， 里 面 写 着 对 正在 经 过 的 菜单 项 的 说 明文 字 ， 效 果 如 图 
6.15 所 示 。 


Xx 
,ee S$ http://localhost:8080, ~ 号 上 
自 页 


> | 


联系 我 们 





图 6.15” 带 提示 信息 的 菜单 


【操作 步骤 】 
第 1 步 ， 构 建 菜单 结构 ， 代 码 如 下 。 


<div 1d="menu"> 

<a href="#"> 
<span class="left"></span> 首 页 <span class="right"></span> 
<span class="intro"> 欢 迎 光 临 本 站 </span> 

</a> 

<a href—="#"> 
<span class='"left"></span> 网 页 设计 <span class="right"></span> 
<span class="intro"> 这 里 有 很 多 设计 师 </span> 

</a> 

<a href="#"> 
<span class="left"></span> 联 系 我 们 <span class="right"></span> 


s 
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对 于 每 一 个 菜单 项 的 a 元素， 分别 再 增加 一 个 span 元 素 ， 里 面包 里 相应 的 说 明文 字 。 在 默认 状 。 轩 次 
态 下 ， 把 这 些 说 明 信 息 隐藏 起 来 ， 当 鼠标 指针 经 过 某 一 个 菜单 项 的 时 候 ， 再 打开 该 span 即 可 。 
第 2 步 ， 新 建 内 部 样式 表 ， 然 后 开始 编写 样式 ， 定 义 菜单 外 框 样 式 ， 代 码 如 下 。 





第 3 步 ， 设 计 超 链接 的 样式 ， 代 码 如 下 。 





第 4 步 ， 在 默认 状态 下 ， 先 隐藏 提示 信息 文本 ， 代 码 如 下 。 





第 5 步 ， 设 计 当 鼠 标 指针 经 过 荣 单项 目 时 ， 显 示 左 右 箭头 特效 ， 代 码 如 下 。 
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overflow: hidden: 读 防 止 洪 出 */ 
border: solid 8px #fff: 上 访 设 置 默 认 的 边框 样式 */ 
top: 4px; 旋 坚 直方 同 的 定位 */ 


} 
#menu a:hover span.left { border-left-color: #c00: left: 8px:} 


#menu a:hover span.right { border-right-color: #c00: rnight: 8px:} 





第 6 步 ， 设 计 当 鼠标 指针 经 过 时 ， 显 示 提 示 信 息 文 本 ， 并 定位 到 菜单 项 的 右 侧 显示 ， 代 码 如 下 。 


#menu a:hover span.intro { 
font-slze: 12px; 
display: block: padding: Spx; 
position: absolute: 访 绝 对 定位 */ 
left: 1S0px: top: Opx:; 
width: 100px; height: auto: 
background-color: #eee; color: #000; 
border: 1px dashed #234: 


} 


6.2.8 设计 排行 榜 


首 乐 排行 榜 ， 主 要 体现 的 是 当前 茶 个 时 间 段 中 茶 些 歌曲 的 排名 情况 。 如 图 6.16 所 示 为 本 节 案 例 
的 效果 图 ， 该 例 展示 了 音乐 排行 榜 在 网 页 中 的 基本 设计 样式 。 





Ehttp://localhost/mysite/inc Dv 0 合 榜 上 有 各 ,音乐 榜 单 


音乐 排行 榜 
辆 浪 人 情歌 
K 歌 之 王 
加 心 如 刀 割 
加 零 (战神 主题 曲 ) i 





图 双子 呈 

辆 高 吾 

国 海阔天空 

国 天 高 地 厚 

国 边 走边 爱 

回 想到 和 做 到 的 





图 6.16 音乐 排行 榜 栏目 


【操作 步骤 】 
第 1 步 ， 新 建 网 页 ， 保 存 为 index.html， 在 <body> 标 签 内 编写 如 下 结构 代码 ， 构 建 HTML 文档 。 


<div class="music sort"> 
<hl> 音 乐 排 行 榜 </h1> 


<div class="content"> 
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<ol> 
<]li><strong> 浪 人 情歌 </strong> <span> 伍 伯 </span></li> 
<]li><strong>K 歌 之 王 </strong> <span> 陈 奕 迅 </span></li> 
<]i><strong> 心 如 刀 割 </strong> <span> 张 学 友 </span></li> 
<]li><strong> 零 (战神 主题 曲 ) </strong> <span> 柯 有 伦 </span></i> 
<]li><strong> 双 子 星 </strong> <span> 光 良 </span></li> 
<]i><strong> 离 歌 </strong> <span> 信 乐团 </span></li> 
<li><strong> 海 阔 天 空 </strong> <span> 信 乐团 </span></li> 
<]i><strong> 天 高 地 厚 </strong> <span> 信 乐团 </span></li> 
<]li><strong> 边 走边 爱 </strong> <span> 谢 十 锋 </span></li> 
<]i><strong> 想 到 和 做 到 的 </strong> <span> 马 天 宇 </span></li> 

</ol> 

</div> 
</div> 





第 2 步 ， 厘清 设计 思路 。 首先， 将 默认 的 显示 效果 与 通过 CSS 样式 修饰 过 的 显示 效果 进行 对 比 ， 
如 图 6.17 所 示 ， 可 以 发 现 两 者 的 不 同 之 处 。 

四 ”文字 的 大 小 。 

MM 榜 单 排名 序号 的 样式 。 

四 ”背景 色 和 边框 色 的 修饰 。 


http: | te/l > 昌 
@ http://localhost/mysite/in D eS hp//ocalhosm p - SO 


音乐 排行 榜 


1. 浪人 情歌 伍佰 
贺 零 (战神 主题 曲 ) 2. KK 歌 之 王 陈奕迅 
3. 心 如 刀 


图 双 了 王 4. 堆 ( 扰 神 全 是 柯 有 伦 
园 高 歌 星光 良 

国 海阔天空 

天 高 地 厚 ~ 

国 边 走边 有 . 边 走边 爱 谢 种 锋 

同 | 想到 和 做 到 的 10. 想到 和 做 到 的 马 天 字 





图 6.17 CSS 样式 修饰 后 ( 左 ) 与 无 CSS 样式 修饰 ( 右 ) 的 对 比 


通过 对 比 可 见 ， 数 字 序 号 已 经 不 再 是 普通 的 常见 文字 了 ， 而 是 经 过 特殊 处 理 的 文字 效果 ， 换 言 
之 ， 必 须 使 用 图 片 才 可 以 达到 预期 效果 。 这 个 数字 图 片 在 列表 中 的 处 理 方式 也 就 是 本 例 需 要 讲解 的 
部 分 ， 在 讲解 之 前 先 思考 以 下 两 个 问题 。 
四 10 个 数字 ， 也 就 是 10 张 图 片 ， 可 不 可 以 将 这 10 张 图 片 合 并 成 1 张 图 片 ? 
四 将 10 张 图 片 合 并 成 1 张 图片 ， 但 HIML 结构 中 又 没有 针对 每 个 列表 <l> 标 签 添加 Class 类 
名 ， 怎 么 将 图 片 指 定 到 相对 应 的 排名 中 ? 
第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定义 一 个 内 部 样式 表 , 准备 编写 样式 。 
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第 4 步 ， 针 对 第 2 步 分析 的 两 个 主要 问题 ， 编 写 如 下 CSS 样式 。 


: .nusic sort { 
| width:200px:; 


border: 1px solid #E8E8ES8; 





} 
.music_sort * {/* 清除 .music_sort 容器 中 所 有 元 素 的 默认 内 补丁 和 外 补丁 ， 并 设置 文字 相关 属性 */ 
Imargln:0: 
padding:0; 
font:normal 12px/22px "宋体 ", Verdana,Lucida, Arial, Helvetica, sans-serif: 
} 
.music sorthl { 
height:24px:; 
text-indent:10px; /* 标题 文字 缩 进 ， 增 加 空间 感 */ 
font-weight:bold: 
color:#FFFFFF: 
background-color:#999999; 
} 
.music sort ol { 
height:220px: /# 固定 榜 单 列表 的 整体 高 度 */ 
padding-left:26px: /# 利用 内 补丁 增加 ol 容器 的 空间 显示 背景 图 片 */ 
list-style:none: /# 去 除 默 认 的 列表 修饰 符 */ 
background:url(1mages/number.gif) no-repeat 0 0: 
} 
.music sortli{ 
width:100%: 
height:22px: 
list-style:none:; /# 去 除 默 认 的 列表 修饰 符 */ 
} 


.music_sort li span {color:#CCCCCC; /* 将 列表 中 的 歌手 名 字 设 置 为 灰色 */} 


这 段 CSS 样式 就 是 为 了 实现 最 终 效 果 而 写 的 ， 代 码 设计 思路 如 下 。 

将 有 序列 表 <ol> 标 签 的 高 度 属性 值 设 定 一 个 固定 值 ， 这 个 固定 值 为 列表 <li> 标 签 的 10 倍 ; 并 将 
列表 所 有 的 默认 样式 修饰 符 取消 ; 利用 有 序列 表 <ol> 标 签 中 增加 左 补丁 的 空间 显示 合并 后 的 数字 背 
景 图 。 

简单 的 方法 代 普 了 给 不 同 的 列表 <] 这 标签 添加 不 同 背 景 图 片 的 步 台 。 但 这 种 处 理 方式 的 缺陷 就 是 
必须 调整 好 背景 图 片 中 10 个 数字 图 片 之 间 的 间距 ， 而 且 如 果 增 加 了 每 个 列表 <l> 标 签 的 高 度 ， 那 么 
就 需要 重新 修改 背景 图 片 中 10 个 数字 图 片 之 间 的 间距 。 
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6.2.9 设计 图 文 列 表 栏 目 


图 文 列表 的 结构 就 是 将 列表 内 容 以 图 片 的 形式 在 页 面 中 显示 ， 简 单 理解 就 是 图 片 列表 信息 附带 
简短 的 文字 说 明 。 在 图 中 展示 的 内 容 主 要 包含 列表 标题 、 图 片 和 图 片 的 相关 说 明文 字 。 

【操作 步骤 】 

第 1 步 ， 新 建 网 页 ， 保 存 为 index.html， 在 <body> 标 签 内 编写 如 下 结构 ， 构 建 HTML 文档 。 


<div class="pic list"> 
<h3> 爱 秀 </h3> 
<div class="content"> 
<ul> 
<]i><a hre 住 "#"><img src="images/1.jpg" alt=" 美 女 个 性 搞怪 自拍 "> 美女 个 性 搞怪 自拍 </a></li> 
<]i><a hre 仁 "#"><img src="images/2.jpg" al=" 绝 对 阳光 的 清纯 小 妹 "> 绝对 阳光 的 清纯 小 妹 </a></li> 
<]i><a hre 仁 "#"><img src="images/3.jpg" al 人 "漂亮 美女 的 可 爱 外 拍 "> 漂 亮 美女 的 可 爱 外 拍 </a></i> 
<]i><a hre 伟 "如 ><img src="images/4.jpg" alt=" 可 爱 美 女 的 艺术 照 "> 可 爱 美 女 的 艺术 照 </a></li> 
<]i><a hre 仁 "#"><img src="images/5.jpg" alt=" 漂 亮 美女 娇 美白 拍 "> 漂 亮 美 女 娇 美 自拍 </a></li> 
<]i><a hre 住 "#"><img src="images/6.jpg" alt=" 清 纯 迷 人 的 黄 毛 丫头 "> 清纯 迷人 的 黄 毛 了 头 </a></li> 
</ul> 
</div> 
</div> 





第 2 步 ， 梳 理 结构 。 对 于 列表 的 内 容 不 再 细 讲 ， 这 个 列表 的 HTML 结构 如 图 6.18 所 示 ， 结 构 层 
次 清晰 而 富有 条 理 。 
列表 整体 容器 


列表 标题 <h1><h2><h3>.… 、 
<div class="list box">....</div> 


列表 内 容 .content 
列表 列表 内 容 窑 器 


<div class="content">....</dIiv> 


ol/ul 


<]1>....</li> 
列表 区 域 
<ul> 


<] >..….</1> 





</ul> 


图 6.18 ”列表 结构 的 分 析 示 意图 


该 结构 不 仅 在 HIML 代码 中 能 很 好 地 体现 页 面 结 构 层 次 , 且 方 便 后 期 使 用 CSS 样 式 对 其 进行 设计 。 

第 3 步 ， 梳 理 设计 思路 。 图 文 列表 的 排列 方式 最 讲究 的 是 宽度 属性 的 计算 。 横 回 排 列 的 列表 ， 
当 整 体 的 列表 (有 序列 表 或 者 无 序列 表 ) 横向 空间 不 足以 将 所 有 列表 横向 显示 时 ， 浏 览 器 会 将 列表 
换行 显示 ， 如 图 6.19 所 示 。 所 以 只 有 将 宽度 计算 正确 ， 才 有 足够 空间 将 所 有 列表 横向 排列 显示 并 且 
不 会 产生 空间 的 浪费 。 


.0 
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“ 和 





爱 秀 
美女 个 性 篇 铎 自拍 纺 对 阳光 的 清纯 小 名 漂亮 美女 的 可 爱 外 拍 可 爱 美 女 的 艺术 昭 漂 高 美女 娇 美 自拍 






宽度 计算 不 正确 导致 空 
间 的 浪费 





因为 列表 空间 不 够 导致 其 自动 换行 
图 6.19 列表 宽度 计算 不 正确 导致 的 结果 


第 4 步 ， 设 计 栏目 宽度 。 在 本 例 中 ， 每 张 图 片 的 宽度 为 134px， 左 右 内 补丁 分 别 为 3px， 左 右边 
框 分 别 为 1px 宽度 的 线条 ， 且 图 片 列表 与 图 片 列表 之 则 的 间距 为 15px( 即 右 外 补丁 为 15px)， 根 据 
盒 模型 的 计算 方式 ， 最 终 列表 <1i> 标 签 的 盒 模型 宽度 值 为 1px+3px+134px+3px+1px+15px=157px， 
此 图 文 列表 区 域 总 宽度 值 为 137pxX 6=942px。 

第 5 步 , 在 <head> 标 签 内 添加 <style type='"text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 准 备 编写 样式 。 

第 6 步 ， 编 写 图 文 列 表 区 域 的 相关 CSS 样式 代码 。 


.plc_ list .content { 


width:942px: 
height: 1 50px; 
overflow:hidden: /设置 图 文 列表 内 容 区 域 的 宽度 和 高 度 ， 超 过 部 分 隐藏 */ 
padding:22px 0 0 15px: 谍 利用 内 补丁 增加 图 文 列 表 内 容 区 域 与 其 他 元 素 的 间距 */ 
} 
.plc_ list .content li { 
float:left:; 
width:142px:; 
margin-right: 15px; 上 # 列表 <li> 标 签 设置 浮动 后 ， 所 有 列表 将 根据 盒 模型 的 计算 方式 计算 列 
表 宽 度 ， 并 且 并 排 显 示 */ 
display:inline: /# 设置 浮动 并 且 增 加 了 左右 外 补丁 后 ， 正 6 会 产生 双 倍 间距 的 bug， 利 
用 该 属性 解决 */ 
} 


.pic_ list .content 作为 图 文 列表 内 容 区 域 ， 增 加 相应 的 内 补丁 使 其 与 整体 之 间 有 空间 感 ， 这 个 是 
视觉 效果 中 必然 会 处 理 的 一 个 问题 。 

由 于 .pic_list .content li 具有 浮动 属性 ， 并 且 有 左右 外 补丁 中 一 个 外 补丁 属性 ， 在 下 6 浏览 絮 中 
会 产生 双 倍 间距 的 bug 问题 。 而 神奇 的 是 ， 添 加 display:inline 可 以 解决 该 问题 ， 并 且 不 会 对 其 他 浏 
览 器 产生 任何 影响 。 

第 7 步 ， 主 要 的 内 容 设置 成 功 之 后 ， 就 可 以 对 图 文 列 表 的 整体 效果 做 CSS 样式 的 修饰 ， 例 如 图 
文 列 表 的 背景 和 边框 以 及 图 文 列 表 标 题 的 高 度 、 文 字样 式 和 背景 等 。 
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.plc_ list { 
width:960px: /# 设置 图 文 列表 整体 的 宽度 */ 
border: 1px solid #D9ESFS: 谍 添加 图 文 列表 的 边框 */ 
backeground:url(images/wrap.jpg) repeat-x 0 0: 谍 添加 图 文 列表 整体 的 背景 图 片 */ 
} 
.pic list* {/* 重 置 图 文 列 表 内 部 所 有 基本 样式 */ 
Imargln:0: 
padding:0; 


list-style:none: 
font:normal 12px/1.5em "宋体 ", Verdana,Lucida, Arial, Helvetica, sans-serif: 
} 
.pic listh3 {/* 设置 图 文 列表 标题 的 高 度 、 行 高 、 文 字样 式 和 背景 图 片 */ 
height:34px: line-height:34px; font-size:14px; 
text-indent: 12px; 
font-weight:bold; color:#223A6D; 
background:url(1mages/h3bg.jpg) no-repeat 0 0: 
} 


第 8 步 ， 调 整 图 文 列 表 信 息 细 节 以 及 对 用 户 体验 的 把 握 ， 例 如 图 片 的 边框 、 背 景 和 文字 的 颜色 
等 ， 并 且 还 要 考虑 当 用 户 控制 鼠标 经 过 图 片 时 ， 为 了 能 更 好 地 体现 视觉 效果 ， 给 用 户 一 个 全 新 的 体 
验 ， 添 加 当 鼠 标 指标 经 过 图 片 列 表 信息 时 图 片 以 及 文字 的 样式 变化 ， 代 码 如 下 。 


.plc_ list .content ia { 


display:block: /# 将 内 联 元 素 a 转换 为 块 元 素 使 其 具备 宽 高 属性 */ 
width:142px: 上 # 设置 转换 为 块 元 素 后 的 a 元素 的 宽度 */ 
text-align:center: 谍 文本 居中 显示 */ 
text-decoration:none: /# 文本 下 划 线 */ 
color:#333333; 谍 文本 的 颜色 */ 
} 
.pic list .content ll a Img { 
display:block: /# 当 设 置 为 块 元 素 时 ， 可 以 解决 正 6 中 图 片 底部 几 个 空白 像素 的 bug */ 
width:134px:; 
height:101px; 
padding:3px: /# 设置 图 片 的 宽 高 属性 以 及 内 补丁 属性 */ 
margin-bottom: 8px: /* 将 图 片 的 底部 外 补丁 设置 为 8px， 使 其 与 文字 之 间 产 生 一 定 间距 */ 
border:1px solid #CCCCCC; 
background-color:#FFFFFF; /* 背景 颜色 将 通过 内 补丁 的 空间 显示 */ 
} 


.pic list .content li a:hover { 


本 
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text-decoration:underline: 

color:#CC0000; 人/# 当 鼠 标 指针 经 过 图 文 列表 时 ， 文 字 有 下 划 线 并 且 改 变 颜 色 */ 
} 
.pic_list .content li a:hover Img { 

background-color:#22407E; ”/* 当 鼠 标 指针 经 过 图 文 列 表 时 ， 图 片 的 背景 颜色 改变 */ 
} 


第 9 步 ， 保 存 页 面 ， 然 后 在 浏览 器 中 预览 ， 滇 示 效 果 如 图 6.20 所 示 。 


Ce) S nto:/Nocalhost mysite/index.html Dr BO) Grnsce 


已 .lis 已 


关 女 个 性 搞怪 自拍 狗 对 阳光 的 清纯 小 林 汪 襄 E 可 爱 关 女 的 艺术 有 限 漂亮 关 立 娇 关 自拍 清纯 半 人 的 黄 毛 T 头 





图 6.20 图 文 信息 列表 页 面 效 果 


6.2.10 设计 选项 卡 


本 例 使 用 定义 列表 结构 设计 一 个 选项 卡 面板 ， 主 要 使 用 了 以 下 两 个 技巧 。 

回 ”利用 绝对 定位 来 定义 dt 元 素 内 容 的 显示 位 置 ， 即 定义 显示 在 dd 元 素 之 上 。 

名 ”利用 销 技 术 为 每 个 ul 列表 定义 销 记 ， 然 后 利用 dt 中 的 超 链接 实现 内 容 切 换 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建 HIMLS 文档 ， 保 存 为 index.html。 

第 2 步 ， 在 页 面 中 构建 HIML 结构 。 切 换 到 代码 视图 ， 在 <body> 标 签 内 手动 输入 下 面 代码 。 


<dl><!-- 定义 列表 --> 
<dt><a hre 传 "#a" title=""> 焦 点 新 闻 </a><a hre 伍 "#b" title=""> 国 内 新 闻 </a><a hre 传 " 共 " title=""> 国 际 新 


闻 </a></dt><!-- 定义 列表 标题 --> 


<dd><!-- 定义 列表 说 明 --> 

<ul id="a"><!-- 内 网 无 序列 表 --> 
<]li>*<a hre 伍 "" title=""> 焦 点 新 闻 1</a></li> 
<]li>*<a hre 伍 "" title=""> 焦 点 新 闻 2</a></li> 
<]i>*<a hre 伍 "" title=""> 焦 点 新 闻 3</a></li> 
<]li>*<a hre 伍 "" title=""> 焦 点 新 闻 4</a></li> 
<]li>*<a hre 伍 "" title=""> 焦 点 新 闻 5</a></li> 

</ul> 
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第 3 步 ， 在 <head> 标 签 内 输入 <style type="text/css">， 定 义 一 个 内 部 样式 表 ， 然 后 在 <style> 标 签 : 
内 手动 输入 下 面 的 样式 代码 。 





本 


: ee&, ~ (sss+DH0 网页 样式 与 有 有 局 从 入 门 到 精通 ( 微 课 精 编 版 ) 





第 4 步 ， 保 存 文档 ， 按 F12 功能 键 ， 在 浏览 器 中 预览 ， 效 果 如 图 6.21 所 示 。 





图 6.21 选项 卡 面板 效果 
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6.2.11 设计 多 级 菜单 


多 级 菜单 可 以 包含 更 多 的 链接 ， 在 有 限 的 空间 内 实现 更 多 导航 选项 。 在 没有 使 用 CSS 之 前 ， 用 
户 习惯 使 用 JavaScript 来 实现 多 级 菜单 。 多 级 菜单 的 样式 也 比较 丰富 ， 如 平行 式 、 王 直 式 、 并 列 式 、 
层 登 式 等 。 本 例 用 纯 CSS 设计 的 多 级 沫 单方 便 易 用 ， 支 持 所 有 浏览 器 。 用 户 可 以 将 本 例 作 为 模板 推 
演出 更 多 样式 的 纯 CSS 多 级 菜单 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建 HIMLS 文档 ， 保 存 为 mdexl.html。 

第 2 步 ， 在 页 面 中 构建 HIML 导航 框架 结构 。 切 换 到 代码 视图 ， 在 <body> 标 签 内 手动 输入 如 下 
代码 。 





<div class="menu"> 
<ul> 
<]i><a hre 伍 "#"> 菜 单一 &#187: 
<!--Lf IE 7]><!--> 
</a> 
<!--<![endif]--> 
<!--[iflte IE 6]><table><tr><td><![endif|--> 
<ul> 
<li><a hre 伍 "#"> 菜 单一 。 &#187; 
<!--Lf IE 7]><!--> 
</a> 
<!--<![endif]--> 
<!--[iflte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a hre 伍 "#"> 菜 单一 1 &#187; 
<I--f IE 7]><!--> 
</a> 
<!--<![endlf]--> 
<!--[1f lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a hre 伍 "#"> 菜 单一 1-1</a></li> 
<]i><a hre 伍 "#"> 菜 单一 1-2</a></li> 
<]i><a hre 伍 "#"> 菜 单一 1-3</a></li> 
</ul> 
<!--[iflte IE 6]></td></tr></table></a><![endif]--> 
</l> 
<li><a hre 伍 "#"> 菜 单一 2 &#187; 
<!--Lf IE 7]><!--> 
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第 3 步 ， 在 <head> 标 签 内 输入 <style type="text/css">， 定 义 一 个 内 部 样式 表 ， 然 后 在 <style> 标 签 
内 手动 输入 下 面 的 样式 代码 。 
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.menu ul li:hover ul, .menu ul a:hover ul {/* 定 义 鼠 标 指 针 经 过 一 级 菜单 时 ， 显 示 对 应 的 二 级 菜单 */ 
visibility: visible; 


} 

.menu ul :hover ul ul {/* 定 义 当 鼠标 指针 移动 至 一 级 菜单 时 ， 隐 藏 三 级 菜单 */ 
visibility: hidden:; 
} 


.menu ul :hover ul :hover ul ul {/* 定 义 当 鼠 标 指针 移动 至 二 级 菜单 时 ， 隐 藏 四 级 菜单 */ 
ee 

} 

.menu ul :hover ul :hover ul {/* 定 义 当 鼠标 指针 经 过 二 级 菜单 选项 时 ， 显 示 相 对 应 的 三 级 菜单 */ 
visibility: visible; 
} 

.menu ul :hover ul :hover ul :hover ul {/* 定 义 鼠 标 指针 经 过 三 级 菜单 时 ， 显 示 相 对 应 的 四 级 菜单 */ 
visibility: visible:; 
} 


第 4 步 ， 保 存 文档 ， 按 F12 功能 键 ， 在 浏览 器 中 预览 ， 效 果 如 图 6.22 所 示 。 








图 6.22 ”设计 垂直 多 级 菜单 样式 


63 在 线 练 习 


下 面 通 过 大 量 的 线 上 示例 ， 帮 助 初 学 者 练习 使 用 HIMLS 设计 表单 结构 和 样式 。 感 兴趣 的 读者 可 


以 扫 码 练习 。 
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使 用 CSS 美化 表格 


在 传统 网 页 设计 中 ， 表 格 的 主要 功能 就 是 页 面 布 局 ， 因 此 表格 是 网 页 编辑 的 工具 ; 在 
标准 化 网 页 设计 中 ， 表 格 的 主要 功能 是 显示 数据 ， 也 可 适当 辅助 结构 设计 。 本 章 将 详细 介 


绍 表 格 在 网 页 设计 中 的 上 应用， 包括 设计 符合 标准 化 的 表格 结构 、 正 确 设 置 表 格 属 性 ， 以 及 
应 用 CSS 表格 样式 。 


【 学 习 要 点 】 

WI 正确 使 用 表格 标签 。 

MI 设置 表格 和 单元 格 属 性 。 
P| 设计 表格 的 CSS 样式 。 











属 性 


border 


cellpadding 
cellspacing 


width 


frame 


rules 


summary 


本 节 将 介绍 table 和 td 的 标签 属性 。 


7.1.1 设置 表格 属性 


表格 标签 包含 大 量 属性 ， 其 中 大 部 分 属性 都 可 以 使 用 CSS 属性 代替 ， 也 有 几 个 专用 属性 无 法 使 
用 CSS 实现 。HTMLS 支持 的 <table> 标 签 属性 及 其 说 明 如 表 7.1 所 示 。 
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71 设置 属性 


表 7.1 HTML5 支持 的 <table> 标 签 属性 及 其 说 明 
说 明 
定义 表格 边框 ， 值 为 整数 ， 单 位 为 像素 。 当 值 为 0 时 ， 表 示 隐 藏 表格 边框 线 。 功 能 类 似 CSS 
中 的 border 属性 ， 但 是 没有 CSS 提供 的 边框 属性 强大 
定义 数据 表单 元 格 的 补 白 。 功 能 类 似 CSS 中 的 padding 属性 ， 但 是 功能 比较 弱 
定义 数据 表单 元 格 的 边界 。 功 能 类 似 CSS 中 的 margin 属性 ， 但 是 功能 比较 弱 
定义 数据 表 的 宽度 。 功 能 类 似 CSS 中 的 width 属性 
设置 数据 表 的 外 边框 线 显示 ， 实 际 上 它 是 对 border 属性 的 功能 扩展 
取 值 包括 void (不 显示 任 一 边框 线 )、above (顶端 边框 线 )、below〔( 底 部 边框 线 )、hsides( 顶 


部 和 底部 边框 线 )、lhs( 左 边框 线 )、rhs( 右 边框 线 )、vsides〈( 左 和 右 的 边框 线 )、box (四周 
的 边框 线 )、border (四 周 的 边框 线 ) 


设置 数据 表 的 内 边线 显示 ， 实 际 上 它 是 对 border 属性 的 功能 扩展 。 
取 值 包括 none (禁止 显示 内 边线 )、groups( 仅 显示 分 组 内 边线 )、rows (显示 每 行 的 水 平 线 )、 
cols (显示 每 列 的 垂直 线 )、all (显示 所 有 行 和 列 的 内 边线 ) 


定义 表格 的 摘要 ， 没 有 CSS 对 应 属性 


rules 和 frame 是 两 个 特殊 的 表格 样式 属性 ， 用 于 定义 表格 的 各 个 内 、 外 边框 线 是 否 显 示 。 由 于 
使 用 CSS 的 border 属性 可 以 实现 相同 的 效果 ， 所 以 不 建议 用 户 选 用 rules 和 frame。 这 两 个 属性 的 取 
值 可 以 参考 表 7.1 中 的 说 明 。 

【示例 1】 本 示例 借助 表格 标签 的 fame 和 rules 属性 定义 表格 以 单行 线 的 形式 进行 显示 。 


<table border="1" frame="hsides" rules="rows" width="100%"> 
<caption>frame 属性 取 值 说 明 </caption> 
<tr><th> 值 </th>< 了 b> 说 明 </th></tr> 
<tr><td>void</td><td> 不 显示 外 侧 边框 。</td></tr> 
<tr><td>above</td><td> 显 示 上 部 的 外 侧 边 框 。</td></tr> 
<tr><td>below</td><td> 显 示 下 部 的 外 侧 边框 。</td> </tr> 
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<tr><td>hsides</td><td> 显 示 上 部 和 下 部 的 外 侧 边框 。</td></tr> 

<tr><td>vsides</td><td> 显 示 左 边 和 右边 的 外 侧 边框 。</td></tr> 

<tr><td>lhs</td><td> 显 示 左 边 的 外 侧 边 框 。</td></tr> 

<tr><td>rhs</td><td> 显 示 右 边 的 外 侧 边框 。</td></tr> 

<tr><td>box</td> <td> 在 所 有 4 条 边 上 显示 外 侧 边框 。</td></tr> 

<tr><td>border</td><td> 在 所 有 4 条 边 上 显示 外 侧 边框 。</td></tr> 
</table> 





上 面 示例 通过 frame 属性 定义 表格 仅 显 示 上 下 框 线 , 使 用 rules 属性 定义 表格 仅 显 示 水 平 内 边线 ， 
从 而 设计 出 单行 线 数据 表格 效果 。 在 使 用 frame 和 rules 属性 时 ， 同 时 定义 border 属性 ， 指 定数 据 表 
显示 边框 线 。 在 浏览 器 中 预览 ， 则 显示 效果 如 图 7.1 所 示 。 


口 localhost/testi.html x 


GC | © localhost/test1.html 











frame 属 性 取 值 说 明 
说 明 





值 
void 不 显示 外 侧 边 框 。 
above 显示 上 部 的 外 侧 边 框 。 
below 显示 下 部 的 外 侧 边 框 。 
hsides 显示 上 部 和 下 部 的 外 侧 边 框 。 
vsides 显示 左边 和 右边 的 外 侧 边 框 。 
lhs 显示 左边 的 外 侧 边 框 。 
box 在 所 有 四 个 边 上 显示 外 侧 边 框 。 
border 在 所 有 四 个 边 上 显示 外 便 边 框 。 

















7.1 定义 单线 表格 样式 


cellpadding 属性 用 于 定义 单元 格 边 沿 与 其 内 容 之 间 的 空白 ，cellspacing 属性 定义 单元 格 之 间 的 
空间 。 这 两 个 属性 的 取 值 单位 为 像素 或 者 百分比 。 
【示例 2】 本 示例 将 设计 井 字 形状 的 表格 ， 代 码 如 下 。 


<table border="1" frame="vo1d" cellpadding="6" cellspacing="16"> 
<caption>rules 属性 取 值 说 明 </caption> 
<tr><th> 值 </th><th> 说 明 </th></tr> 
<tr><td>none</td><td> 没 有 线条 。</td></tr> 
<tr><td>groups</td><td> 位 于 行 组 和 列 组 之 间 的 线条 。</td></tr> 
<tr><td>rows</td><td> 位 于 行 之 间 的 线条 。</td></tr> 
<tr><td>cols</td><td> 位 于 列 之 间 的 线条 。</td></tr> 
<tr><td>all</td><td> 位 于 行 和 列 之 间 的 线条 。</td></tr> 

</table> 


上 和 面 示例 通过 frame 属性 隐藏 表格 外 框 ， 然 后 使 用 cellpadding 属性 定义 单元 格 内 容 的 边 距 为 6 
像 系 ， 单 元 格 之 间 的 间距 为 16 像素 ， 则 在 浏览 器 中 预览 效果 如 图 7.2 所 示 。 


a 


[ localhost/testi.html x Wn 


GG | © localhost/test1.html 


rules 属 性 取 值 说 明 
说 明 
没有 线条 。 


位 于 行 组 和 列 组 之 间 的 线条 。 








位 于 行 之 间 的 线条 。 
位 于 列 之 间 的 线条 。 


位 于 行 和 列 之 间 的 线条 。 














图 7.2 定义 井 字 表 格 样式 


安 提示 : cellpadding 属性 定义 的 效果 ， 可 以 使 用 CSS 的 padding 样式 属性 代替 ， 不 建议 使 用 
cellpadding 属性 。 


7.1.2 设置 单元 格 属性 


单元 格 标签 (<td> 和 <th>) 包含 大 量 属性 ， 其 中 大 部 分 属性 都 可 以 使 用 CSS 属性 代替 ， 也 有 几 
个 专用 属性 无 法 使 用 CSS 实现 。HTMLS 支持 的 <td> 和 <th> 标 签 属性 及 其 说 明 如 表 7.2 所 示 。 





表 7.2 HTML5 支持 的 <td> 和 <th> 标 签 属性 及 其 说 明 


建议 使 用 CSS 完成 设计 


z 属 性 说 明 

: i 定义 单元 格 中 内 容 的 缩写 版 本 

: 定义 单元 格 内 容 的 水 平 对 齐 方 式 。 取 值 包括 right( 右 对 齐 )、left( 左 对 齐 )、center 
: align (居中 对 齐 )、justify( 两 端 对 齐 ) 和 char( 对 准 指定 字符 )。 功 能 类 似 CSS 中 的 text-align 
属性 ， 建 议 使 用 CSS 完成 设计 

: ee” 对 单元 进行 分 类 。 取 值 为 一 个 类 名 

char 定义 根据 哪个 字符 来 进行 内 容 的 对 齐 

: cho 定义 对 齐 字符 的 偏 移 量 

: colspan 定义 单元 格 可 横 跨 的 列 数 

headers 定义 与 单元 格 相关 的 表 头 

: rowspan 定义 单元 格 可 模 跨 的 行 数 

\ ,oe 定义 将 表 头 数据 与 单元 格 数据 相关 联 的 方法 。 取 值 包 括 col ( 列 的 表 头 )、colgroup 
( 列 组 的 表 头 )、row 〈 行 的 表 头 )、rowgroup 〈 行 组 的 表 头 ) 

定义 单元 格 内 容 的 垂直 排列 方式 。 取 值 包 括 top〈 顶 部 对 齐 )、middle (居中 对 齐 )、 
valign bottom (底部 对 齐 )、baseline〈 基 线 对 齐 )。 功 能 类 似 CSS 中 的 vertical-align 属性 ， 


.9B 
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colspan 和 rowspan 是 两 个 重要 的 单元 格 属性 ， 分 别 用 来 定义 单元 格 可 路 列 或 跨行 显示 ， 取 值 为 
正 整 数 。 如 果 取 值 为 0， 则 表示 浏览 器 横 跨 到 列 组 的 最 后 一 列 或 者 行 组 的 最 后 一 行 。 
【示例 】 本 示例 使 用 colspan=5 属性 定义 单元 格 跨 列 显示 ， 代 人 码 如 下 ， 效 果 如 图 7.3 所 示 。 





国志 


<table border=1> 

<tr><th align=center colspan=5> 课 程 表 </th></tr> 

<tr><th> 星 期 一 </th><th> 星 期 二 </th> <th> 星 期 三 </th><th> 星 期 四 </th><th> 星 期 五 </th></tr> 
<tr><td align=center colspan=5> 上 午 </td> </tr> 

<tr><td> 语 文 </td><td> 物 理 </td> <td> 数 学 </td> <td> 语 文 </td><td> 美 术 </td></tr> 
<tr><td> 数 学 </td><td> 语 文 </td><td> 体 育 </td> <td> 英 语 </td><td> 音 乐 </td></tr> 
<tr><td> 语 文 </td> <td> 体 育 </td><td> 数 学 </td><td> 英 语 </td><td> 地 理 </td></tr> 
<tr><td> 地 理 </td><td> 化 学 </td><td> 语 文 </td> <td> 语 文 </td><td> 美 术 </td></tr> 
<tr><td align=center colspan=5> 下 午 </td></tr> 

<tr><td> 作 文 </td><td> 语 文 </td><td> 数 学 </td><td> 体 育 </td><td> 化 学 </td></tr> 
<tr> <td> 生 物 </td><td> 语 文 </td><td> 物 理 </td><td> 自 修 </td><td> 自 修 </td></tr> 


</table> 


Ee 一 [+) ed ee http://localhost/test1.html ht a [0 localhost 







































































图 7.3 定义 单元 格 跨 列 显 示 
7.2 ”表格 基本 样式 


CSS 为 表格 定义 了 5 个 专用 属性 ， 详 细 说 明 如 表 7.3 所 示 。 
表 7.3 CSS 表格 属性 列表 


separate 〈 边 分 开 ) | | 定义 表格 的 行 和 单元 格 的 边 是 合并 在 一 起 还 是 按照 标准 的 HIML 样 
border-collapse 
collapse 〈 边 合并 ) ”| 式 分 开 


定义 当 表 格 边 框 独 立 〈 如 当 border-collapse 属性 等 于 separate) 时 ， 
border-spacing |length 可 站 . 
行 和 单元 格 的 边 在 横生 和 纵 同 上 的 间距 ， 该 值 不 可 以 取 负 值 


和 








续 表 


四 定义 表格 的 caption 对 象 位 于 表格 的 顶部 或 底部 。 应 与 caption 元 素 
caption-side top | bottom 一 起 使 用 


empty-cells show | hide 定义 当 单 元 格 无 内 容 时 ， 是 否 显示 该 单元 格 的 边框 


定义 表格 的 布局 算法 ， 可 以 通过 该 属性 改善 表格 呈 递 性 能 ， 如 果 设 置 

fixed 属性 值 ， 会 使 正 以 一 次 一 行 的 方式 呈 递 表格 内 容 ， 从 而 提供 给 
table-layout auto | fixed | 

信息 用 户 更 快 的 速度 ; 如 果 设 置 auto 属性 值 ， 则 表格 在 每 一 单元 格 内 


所 有 内 容 读 取 计 算 之 后 才 会 显示 出 来 


除了 表 7.3 介绍 的 5 个 表格 专用 属性 外 ，CSS 其 他 属性 对 于 表格 一 样 适用 。 


7.2.1 设计 表格 边框 线 





使 用 CSS 的 border 属性 代替 <table> 标 签 的 border 属性 定义 表格 边框 ， 可 以 优化 代码 结构 。 
【示例 】 本 示例 演示 了 如 何 使 用 CSS 设计 细 线 边框 样式 的 表格 。 

第 1 步 ， 在 <head> 标 签 内 添加 <style type='"text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 

第 2 步 ， 在 内 部 样式 表 中 输入 下 面 样式 代码 ， 定 义 单 元 格 边框 显示 为 1 像素 的 灰色 实 线 。 


th, td {font-size:12px; border:solld 1px gray;} 
第 3 步 ， 在 <body> 标 签 内 构建 一 个 简单 的 表格 结构 ， 代 码 如 下 。 


<table> 

<tr> 
<th> 属 性 </th> 
<th> 版 本 </th> 
<th> 继 承 性 </th> 
< 也 > 描述 </th> 

</tr> 

<tr> 
<td>table-layout</td> 
<td>CSS2</td> 
<td> 无 </td> 
<td> 设 置 或 检索 表格 的 布局 算法 </td> 

</tr> 

<tr> 
<td>border-collapse</td> 
<td>CSS2</td> 
<td> 有 </td> 
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<td> 设 置 或 检索 表格 的 行 和 单元 格 的 边 是 合并 在 一 起 还 是 按照 标准 的 HTML 样式 分 开 </td> 
</tr> 
<{tr> 
<td>border-spacing</td> 
<td>CSS2</td> 
<td> 有 </td> 
<td> 设 置 或 检索 当 表格 边框 独立 时 ， 行 和 单元 格 的 边框 在 横向 和 纵向 上 的 间距 </td> 
</tr> 
<> 
<td>caption-side</td> 
<td>CSS2</td> 
<td> 有 </td> 
<td> 设 置 或 检索 表格 的 caption 对 象 是 在 表格 的 哪 一 边 </td> 
</tr> 
<tr> 
<td>empty-cells</td> 
<td>CSS2</td> 
<td> 有 </td> 
<td> 设 置 或 检索 当 表 格 的 单元 格 无 内 容 时 ， 是 否 显示 该 单元 格 的 边框 </td> 
</tr> 
</table> 





第 4 步 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 7.4 所 示 。 
TE 人 太吉 
一 EE | 原生 RE 


| 
barder-collapse [C332] 有 有 。 设置 或 入 雪 表 格 的 行 和 单元 格 的 边 是 会 并 在 一 起 这 是 按 申 标 准 的 HT 二 样式 分开 











border-spacing ||CSS2| 有 | | 设置 或 检索 当 表 格 边 框 独立 时 ， 行 和 单元 格 的 边框 在 构 句 和 纵向 上 的 间距 
caption-side ”CSS2| 有 | [设置 或 检索 表格 的 caption 象 是 在 表格 的 嘿 p 一 边 
Empy-cells CSS] 有 |[ 芝 轩 或 检索 当 表 格 的 单元 司 无 内 理 时 ， 是 车 显 示 该 单元 入 的 边 柱 








图 7.4 使 用 CSS 定义 单元 格 边框 样式 


通过 效果 图 可 以 看 到 ， 使 用 CSS 定义 的 单行 线 不 是 连贯 的 线条 。 这 是 因为 表格 中 每 个 单元 格 都 
是 一 个 独立 的 空间 ， 为 它们 定义 边框 线 时 ， 相 互 之 间 不 是 紧密 连接 在 一 起 的 。 
第 5 步 ， 在 内 部 样式 表 中 ， 为 table 元 系 添 加 如 下 CSS 样式 ， 把 相 邻 单元 格 进行 合并 。 


table { border-collapse:collapse;}/* 合并 单元 格 边框 */ 
第 6 步 ， 在 浏览 器 中 重新 预 帘 页 面 效 果 ， 如 图 7.5 所 示 。 


Ai 





设置 或 检索 当 表 格 边 框 独立 时 ， 行 和 单元 格 的 边框 在 横 品 和 纪 品 上 的 间距 
设置 或 检索 表格 的 captiony 寺 象 是 在 表格 的 哪 [一 边 











St . 上 : 为 了 兼容 <table> 标 签 的 cellspacing 属性 ，CSS 定义 了 border-spacing 属性 ， 该 属性 能 够 分 离 单元 
视频 讲解 格 间距 。 取 值 包 含 1 个 或 2 个 值 。 当 定义 1 个 值 时 ， 则 定义 单元 格 行 间距 和 列 间 距 都 为 该 值 ， 例 如 : 


table {border-spacing:20px:y/* 分 陋 单 元 格 边框 */ 
如 果 分 别 定 义 行 间距 和 列 间距 ， 就 需要 定义 2 个 值 ， 例 如 : 
table { border-spacing:10px 30px:}/* 分 隔 单元 格 边 框 */ 


其 中 第 1 个 值 表示 单元 格 之 间 的 行 间距 ， 第 2 个 值 表 示 单 元 格 之 间 的 列 间 距 ， 该 属性 值 不 可 以 
为 负数 。 使 用 cellspacing 属性 定义 单元 格 之 间 的 距离 之 后 ， 该 空间 由 表格 背景 填充 。 

使 用 该 属性 应 注意 以 下 几 个 问题 。 

名 早期 正 浏览 器 不 支持 该 属性 ， 要 定义 相同 效果 的 样式 ， 需 要 结合 传统 <table> 标 签 的 


cellspacing 属性 来 设置 。 
四 ”使 用 cellspacing 属性 时 ,应 确保 单元 格 之 间 相 互 的 独立 性 ,不 能 使 用 border-collapse:collapse; 
样式 定义 合并 表格 内 单元 格 的 边框 。 


四 cellspacing 属性 不 能 够 使 用 CSS 的 margin 属性 来 代 蔡 。 对 于 td 元 素来 说 , 不 文 持 margin 属性 。 
四 ”可 以 为 单元 格 定义 补 日 ， 此 时 使 用 CSS 的 padding 属性 与 单元 格 的 cellpadding 标签 属性 实 
现 效果 是 相同 的 。 
【示例 1】 以 7.2.1 节 示 例 中 的 表格 结构 为 基础 ， 重 新 设计 内 部 样式 表 ， 为 表格 内 单元 格 定义 
上 下 6 像素 和 左右 12 像素 的 间距 ， 同 时 设计 单元 格 内 部 空 队 为 12 像素 。 代 码 如 下 ， 演 示 效 果 如 
图 7.6 所 示 。 


table { border-spacing: 6px 12px; } 
th, td { 
font-slze: 12px; 
border: solid 1px gray:; 
padding: 12px; 
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设置 或 检索 表格 的 布局 算法 








| 设置 或 检索 去 格 的 行 和 单元 格 的 边 是 合并 在 一 起 还 是 按 昭 标准 的 HTML 样 式 分 开 | 
设置 或 检索 当 表 格 边 框 独 立时 ， 行 和 单元 格 的 边框 在 横 各 和 和 拨 向 上 的 间距 


设置 或 检索 表格 的 captiomj 象 是 在 表格 的 那 一 边 














设置 或 检索 当 表格 的 单元 格 无 内 容 时 ， 是 否 显示 该 单元 格 的 边框 








图 7.6 增加 单元 格 空隙 
也 可 以 为 <table> 标 签 定义 补 日 ， 此 时 可 以 增加 表格 外 框 与 单元 格 之 间 的 距离 。 


【示例 2】 在 示例 1 的 基础 上 ， 为 <table> 标 签 重 设 如 下 样式 ， 设 计 表 格外 框 为 2 像素 红色 实 线 ， 
定义 表格 外 框 与 内 部 单元 格 间距 为 2 像素 。 代 码 如 下 ， 显 示 效 果 如 图 7.7 所 示 。 


table { 
border-spacing: 6px 12px; 
border: solid 2px red: 
padding: 2px:; 








设置 或 检索 丧 粘 的 布局 芋 法 











设 壮 或 检索 表 窜 的 行 可 单元 格 的 边 是 合并 在 一 起 还 是 按照 标准 的 HTML 样式 分 开 





设 善 或 检索 当 表 格 边 框 抽 立时 ， 行 和 单元 格 的 边框 在 榴 器 和 所 向 上 的 间距 





设置 或 检索 表 窜 的 capaoon 象 是 在 表格 的 那 一 边 

















设置 或 检索 当 表 格 的 单元 格 无 内 容 虾 ， 是 否 显示 该 单元 格 的 边框 








图 7.7 ”为 表格 和 单元 格 同 时 定义 补 白 效果 
7.2.3 ”隐藏 空 单元 格 
如 果 表 格 单元 格 的 边框 处 于 分 离 状 态 (border-collapse: separate; )， 可 以 使 用 CSS 的 empty-cells 
属性 设置 空 单元 格 是 否 显 示 。 当 其 值 为 show 时 ， 表 示 显 示 空 单元 格 ; 当 值 为 hide 时， 表示 隐藏 空 单 
元 格 。 
【示例 】 在 本 示例 中 ， 隐 藏 第 2 行 第 2 列 的 空 单 元 格 边框 显示 。 代 码 如 下 ， 效 果 如 图 7.8 所 示 。 





<style type="text/css"> 
table {/* 表格 样式 */ 


a ke 
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width: 400px: /# 固定 表格 宽度 */ 
border: dashed 1px red: /# 定义 虚线 表格 边框 */ 
empty-cells: hide: /# 隐藏 空 单元 格 */ 


} 
了 bh, td {/* 单元 格 样式 */ 
border: solid 1px #000; /# 定义 实 线 单元 格 边框 */ 
padding: 4px: 谍 定义 单元 格 内 的 补 白 区 域 */ 
} 
</style> 


<table> 
<tr><td> 西 </td><td> 东 </td> </tr> 
<tr><td> 北 </td><td></td></tr> 
</table> 





隐藏 空 提单 元 格 默认 显示 的 空白 单元 格 
图 7.8 隐藏 空 单元 格 效果 


会 提示 : 所 谓 空 单元 格 ， 就 是 没有 可 视 内 容 的 单元 格 。 如 果 单 元 格 的 visibility 属性 值 为 hidden， 
即便 单元 格 包含 内 容 ， 也 认为 是 无 可 视 内容 。 而 “&nbsp:” 和 其 他 空白 字符 为 可 视 内 容 。 
ASCII 字符 中 的 回 车 符 (“\0D”) 、 换 行 符 ( “OA”) 、Tab 键 ( “09” ) 和 空格 键 
( “20”) 表示 无 可 视 内 容 。 


如 果 表 格 行 中 所 有 单元 格 的 empty-cells 属性 都 为 hide， 且 都 不 包含 任何 可 视 内 容 ， 那 么 整 行 就 
等 于 设置 了 display: none。 


7.2.4 定义 标题 样式 


| 使 用 CSS 的 caption-side 属性 可 以 定义 标题 的 显示 位 置 ， 该 属性 取 值 包括 top( 位 于 表格 上 面 )、 
bottom 位 于 表格 底部 )、left (位 于 表格 左 侧 ， 非 标准 ) 和 right (位 于 表格 右 侧 ， 非 标准 )。 

如 果 要 水 平 对 齐 标题 文本 ， 则 可 以 使 用 text-align 属性 。 对 于 左右 两 侧 的 标题 ， 可 以 使 用 
”vertical-align 属性 进行 垂直 对 齐 ， 取 值 包括 top、middle 和 bottom， 其 他 取 值 无 效 ， 默 认为 top。 

”。 ” 【示例 】 在 本 示例 中 ， 定 义 标题 靠 左 显示 ， 并 设置 标题 季 直 居中 显示 。 但 不 同 浏览 器 在 解析 时 分 
歧 比 较 大 ， 如 在 正 浏览 器 中 显示 效果 如 图 7.9 所 示 ， 但 是 在 Firefox 中 的 显示 效果 如 图 7.10 所 示 。 
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7.9 正解 析 表 格 标题 效果 7.10 Firefox 解析 表格 标题 效果 


【拓展 】 
当 同 时 为 <table>、<tr> 和 <td> 等 标签 定义 背景 色 、 边 框 、 字 体 属 性 等 样式 时 ， 就 容易 发 生 样式 重 
登 问 题 。 根 据 表格 布局 模型 ， 各 种 表格 对 象 背 景 样式 层 登 的 顺序 如 图 7.11 所 示 。 


AN 
™ 
An 
nm 
™ 
™ 
~、 
™ 


ee 
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Cee GB http://localhost/mysite/test ht 用 - 昌 CCe 估 要 要 对 象 标 式 的 后 营 屈 永 。 > 


表格 对 象 的 样式 层 县 顺序 








table 

coleroup 

col 

thead、tbody 、ttoot 








图 7.11 表格 对 象 样式 的 层 登 顺序 


从 图 7.11 可 以 看 到 : td 元 素 的 样式 具有 最 大 优先 权 ， 以 此 类 推 ， 如 果 单 元 格 为 透明 ， 则 行 (tr 
元 素 ) 具有 最 大 优先 权 。 表 格 定 义 的 背景 优先 权 最 小 ， 当 表格 中 其 他 元 素 都 为 透明 时 ， 才 可 以 看 到 
表格 的 背景 。 


7.3 案例 实战 


本 节 将 结合 几 个 案例 详细 讲解 表格 样式 的 一 般 设计 技巧 。 
7.3.1 设计 斑马 线 表 格 


本 例 将 对 一 个 简单 的 表格 进行 设计 ， 使 它 看 起 来 更 为 精致 。 另 外 ， 当 表格 的 行 和 列 都 很 多 ， 并 
且 数据 量 很 大 的 时 候 ， 为 避免 单元 格 采用 相同 的 背景 色 会 使 浏览 者 感到 次 乱 ， 发 生 看 错 行 的 情况 ， 
为 表格 设置 隔行 变色 的 效果 ， 使 得 奇数 行 和 偶数 行 的 背景 色 不 一 样 ， 示 例 效果 如 图 7.12 所 示 。 








图 7.12 ”设计 隔行 变色 的 样式 效果 
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【操作 步骤 】 
第 1 步 ， 新 建 HIMLS 文档 ， 设 计 表 格 结构 ， 代 码 如 下 。 


<table summary=" 历 届 奥 运 会 中 国 奖 牌 数 "> 
<caption> 历 届 奥 运 会 中 国 奖 牌 数 </caption> 和 /0O 
<tr><th> 编 号 </th><th> 年 份 </th><th> 城 市 </th><th> 金 牌 </th><th> 银 牌 </th><th> 铜 牌 </th><th> 总 计 





</th></tr> 
</thead> 
<tbody> 
<tr><td> 第 23 届 </td><td>1984 年 </td><td> 洛 杉 矶 (美国 ) </td><td>15</td><td>8</td><td>9</td> 
<td>32</td></tr> 
<tr><td> 第 24 届 </td><td>1988 年 </td><td> 汉 城 (韩国 ) </td><td> 5</td><td>11</td><td>12</td> 
<td>28</td></tr> 
<tr><td> 第 25 届 </td><td>1992 年 </td><td> 巴 塞 罗 那 〈 西 班 牙 ) </td><td>16</td><td>22</td><td> 
16</td><td>54</td></tr> 
<tr><td> 第 26 届 </td><td>1996 年 </td><td> 亚 特 兰 大 (美国 ) </td><td>16</td><td>22</td><td> 
12</td><td>50</td></tr> 
<tr><td> 第 27 届 </td><td>2000 年 </td><td> 悉 尼 ( 澳 大 利 亚 〉</td><td>28</td><td>16</td><td> 
15</td><td>59</td></tr> 
<tr><td> 第 28 届 </td><td>2004 年 </td><t 和 > 雅典 (希腊) </td><td>32</td><td>17</td><td> 
14</td><td>63</td></tr> 
<tr><td> 第 29 届 </td><td>2008 年 </td><td> 北 京 (中 国 ) </td><td>51</td><td>21</td><td> 
28</td><td>100</td></tr> 
<tr><td> 第 30 届 </td><td>2012 年 </td><td> 伦敦 〈 英 国 ) </td><td>38</td><td>27</td><td> 
23</td><td>88</td></tr> 
<tr><td> 第 31 届 </td><td>2016 年 </td><td> 里 约 热 内 卢 (巴西 )</td><td>26</td><td>18</td><td> 
26</td><td>70</td></tr> 
</tbody> 
<tfoot> 
<tr><th> 合 计 </th><td colspan="4">544 枚 </td></tr> 
</tfoot> 
</table> 


在 这 个 表格 中 ,使 用 的 标记 从 上 至 下 依次 为 <caption>、<thead>、<tbody> 和 <tfoot>， 分 别 定 义 表 
格 的 标题 、 列 标题 行 、 数 据 区 域 和 脚注 行 。 

第 2 步 ， 在 头 部 区 域 <head> 标 签 中 插入 一 个 <style type="text/css"> 标 签 ， 在 该 标签 中 输入 下 面 的 
样式 代码 ， 定 义 表格 框 和 表格 标题 样式 。 


table {/* 表 格 样式 */ 
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第 3 步 ， 设 计数 据 行 单元 格 样式 ， 代 码 如 下 。 





第 4 步 ， 设 计 脚注 行 单元 格 样式 ， 代 码 如 下 。 





第 5 步 ， 设 计 列 标题 行 样式 ， 代 码 如 下 。 





第 6 步 ， 为 最 后 4 列 单元 格 定 义 样式 ， 代 码 如 下 。 
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这 里 将 3 个 相 邻 选择 器 组 合 使 用 ， 精 确 匹 配 到 后 面 4 列 单元 格 标签 ， 然 后 设置 字体 颜色 为 红色 ， 


文本 右 对 齐 显 示 。 | 
| VY 
【拓展 】 s 


用 户 可 以 使 用 <col> 或 <colgroup> 标 签 为 各 列 定 义 样式 。 例 如 ， 下 面 代码 中 第 2 个 <col span="4"> 
标签 可 以 为 最 后 4 列 定 义 样式 。 


<table summary=" 历 届 奥 运 会 中 国 奖牌 数 "> 





<caption> 
历届 奥运 会 中 国 奖 有 牌 数 
</caption> 


<col span="3"></col> 
<col span="4" style="color:red; text-align:rnight"></col> 
<thead> 


</table> 


但 是 , 现代 标准 浏览 器 仅 支 持 background-color 和 width 属性 , 不 支持 其 他 CSS 属性 。 IE 诡异 模 
式 文 持 所 有 CSS 属性 。 

第 7 步 ， 设 计 隅 行 换 色 样式 。 隔 行 换 色 是 一 款 比较 经 典 的 表格 样式 ， 这 种 样式 主要 是 从 用 户 体验 
角度 来 设计 的 ， 以 提升 用 户 浏 览 数 据 的 速度 和 准确 度 。 隔 行 换 色 的 传统 设计 方法 是 : 定义 一 个 类 ， 然 
后 把 该 类 应 用 到 所 有 奇数 行 或 偶数 行 。 推 荐 方法 : 使 用 CSS3 选择 器 匹配 表格 中 侦 数 行 和 奇数 行 ， 并 
设计 不 同 的 样式 ， 代 码 如 下 。 

tbody tr:nth-child(odd) td { 
background-color: #CEA: 
border-bottom: 2px solid #67BD2A:; 


} 
第 8 步 ， 设 计 鼠 标 指 针 移 过 数据 行 时 的 交互 样式 ， 代 码 如 下 。 


tbody tr:hover td, tbody tr:hover th { 
background-color: #8b7: 
color: #fff: 


} 
7.3.2 设计 粗 线 框 表格 


本 例 以 7.3.1 节 案 例 的 数据 表格 结构 为 基础 ,介绍 如 何 使 用 CSS 把 表格 设计 为 网 格 化 效果 ,以 此 加 守 人 
理解 CSS 控制 表格 的 方法 ， 案 例 效 果 如 图 7.13 所 示 。 视频 半 
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图 7.13 设计 粗 线 框 表 格 


【操作 步骤 】 
第 1 步 ， 新 建 HIMLS 文档 ， 复 制 7.3.1 节 示 例 的 数据 表格 结构 ， 把 第 1 列 单元 格 <td> 标 签 改 为 
<th> 标 签 。 
第 2 步 ， 规 划 整 个 页 面 的 基本 显示 属性 并 设置 表格 样式 ， 代 码 如 下 。 
body { /* 网 页 基本 样式 类 */ 
background-color: #f8e6e6;: /#* 网 页 背景 颜色 #/ 
margin: 50px; 必 表 格 四 周 补 白 */ 
} 
table {/* 表 格 样 式 */ 
border: 6px double #3186dd; /* 表格 边框 */ 
font-family: Arial:; 
text-align: center:; 上 性 表 格 中 文字 水 平 居 中 对 齐 */ 
border-collapse: collapse; /# 边框 重 登 */ 
} 


此 时 显示 效果 如 图 7.14 所 示 。 可 以 看 到 ， 网 页 背景 颜色 发 生 了 改变 ， 且 表格 显示 了 边框 。 
第 3 步 ， 设 置 表格 标题 的 样式 ， 代 码 如 下 。 


table caption { /# 设 置 表格 标题 */ 
padding-top: 3px: /# 设 置 表格 标题 的 顶部 边 距 */ 
padding-bottom: 4px; /# 设 置 表格 标题 的 底部 边 距 */ 
font-size: 30px; /# 表 格 标题 字体 大 小 */ 
color: red: /# 表 格 标题 字体 颜色 */ 

} 


2 
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图 7.14 设置 网 页 基本 属性 及 表格 样式 
第 4 步 ， 设 置 表格 中 的 单元 格 样式 ， 代 码 如 下 。 
table th {/* 表格 的 行 、 列 名 称 单元 格 的 样式 */ 


border: 2px solid #429fff: /# 行 、 列 名 称 边框 */ 
background-color: #d2e8ff: /# 行 、 列 名 称 单元 格 的 背景 颜色 */ 
font-weight: bold: /# 行 、 列 名 称 字体 加 粗 */ 
padding-top: 4px: /# 设置 行 、 列 名 称 单元 格 的 上 、 下 、 左 、 右 边 距 */ 
padding-bottom: 4px: 
padding-left: 10px; 
padding-right: 10px; 

} 

table td {/* 表格 单元 格 样式 */ 
border: 2px solid #429fff: /# 单元 格 边框 */ 

} 


在 以 上 代码 中 , 分 别 设置 了 <th> 和 <td> 标 签 的 样式 ， 并 对 表格 的 单元 格 进行 了 背景 颜色、 边框 样 
式 设置 ， 从 而 达到 美化 表格 的 目的 。 至此， 整个 案例 设计 完成 。 


7.3.3 ”设计 浅 色 风格 表格 


本 例 通过 浅 色 搭配 设计 一 球 淡雅 的 表格 效果 ， 同 时 设置 表格 隔行 变色 ， 使 奇数 行 和 侦 数 行 背景 
颜色 不 同 ， 让 数据 行 看 起 来 清晰 、 明 了， 示例 效果 如 图 7.15 所 示 。 
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图 7.15 设计 浅 色 风格 表格 


【操作 步骤 】 
第 1 步 ， 新 建 HIMLS 文档， 复制 7.3.2 节 示 例 的 数据 表格 结构 。 
第 2 步 ,定义 网 页 基本 属性 、 表 格 <table id="mytable"> 的 样式 ， 以 及 表格 标题 样式 ， 代 码 如 下 。 


body { /* 网 页 基本 样式 */ 
background: #E6EAFES:; 


} 

table { * 表 格 样式 */ 
width: 700px: 话 表 格 宽 度 */ 
padding: 0; 
margin: 0; 
border: 1px solid #C1DAD7: 广 表 格 边框 */ 
border-collapse: collapse; 

} 


caption { /# 设 置 表格 标题 */ 
padding: 0 0 Spx 0:; 


text-align: center: 话 水 平 居中 */ 
font-size: 30px; 皮 字 体 大 小 */ 
font-weight: bold: /# 字 体 加 粗 光 / 


} 


在 以 上 代码 中 ， 首 先 定 义 了 页 面 的 背景 颜色 ， 在 坟 nytable 中 设置 了 表格 的 宽度 为 700px， 并 为 其 
添加 了 表格 边框 ， 此 时 的 显示 效果 如 图 7.16 所 示 。 为 table 添加 border-collapse: collapse: 声 明 ， 以 解 
决 单元 格 边框 分 离 问题 。 


人 





第 7 章 使 用 CSS 美化 表格 5 


Ee ml http://localhost:8080/mysite/test.html -6 


历届 奥运 会 中 国 奖牌 数 


金 牧 
洛 杉 筷 《美国 ) 


汉城 《韩国 ) 
巴塞 罗 那 《西班牙 ) 


亚特兰大 美国) 





wy 


敦 (英国 ) 
里 约 热 内 占 《巴西 ) 





图 7.16 设置 表格 基本 属性 


第 3 步 , 使 用 thead th 选择 器 单独 为 列 标题 行 定义 样式 , 使 用 tbody 选择 器 定义 数据 区 域 背景 色 ， 
代码 如 下 。 


theadth{ 
color: #4f6b72: 
border: 1px solid #C1DAD7; 
letter-spacing: 2px; 
text-align: left; 
padding: 6px 6px 6px 12px; 
background: #CAE8EA:; 

} 

tbody { background: #fff:} 


第 4 步 ， 使 用 tbody th, tbody td 组合 选 择 器 ， 为 数据 区 单元 格 定义 样式 ， 这 样 就 避免 了 为 每 个 单 
元 格 引用 类 样式 ， 代 码 如 下 。 


tbody th, tbody td { 
border: 1px solid #C1DAD”:; 
font-size: 14px:; 
padding: 6px 6px 6px 12px; 
color: #4f6b72: 

} 


第 5 步 , 使 用 CSS3 的 结构 伪 类 选择 器 tbody tr:nth-child(2n) 专 门 为 数据 区 域内 所 有 偶数 行 定义 特 
殊 样 式 ， 实 现 隔行 换 色 效果 ， 这 样 避 免 了 单独 为 偶数 行 单元 格 应 用 特殊 类 样式 ， 代 码 如 下 。 


tbody tr:nth-child(2n) { 
background: #FSFAFA: 
color: #797268; 


和 
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7.3.4 设计 清新 风格 表格 


本 例 设 计 这 样 一 款 表 格 样式 : 整体 色调 以 清淡 为 主 ， 边 框 线 以 淡 蓝 色 为 主 色调 ， 并 配 以 12 像素 
的 灰色 字体 ， 营 造 一 种 轻松 的 视觉 效果 。 然 后 ， 使 用 隔行 换 色 样式 分 行 显示 数据 ， 这 也 是 目前 数据 
表格 的 主流 样式 ， 它 符合 视线 的 换行 显示 ， 避 人 免 错 行 阅读 数据 。 使 用 渐变 背景 图 像 来 设计 表格 列 标 
题 ， 使 表格 看 起 来 更 大 方 ， 富 有 立体 感 。 

【操作 步骤 】 

第 1 步 ， 新 建 HTML5 文档 ， 复 制 7.3.3 节 示 例 的 数据 表格 结构 。 

第 2 步 ， 定 义 表格 样式 。 表 格 样式 包括 3 部 分 内 容 : 表格 边框 和 背景 样式 、 表 格 内 容 显 示 样 式 
和 表格 布局 样式 。 布 局 样式 包括 : 定义 表格 固定 宽度 解析 ， 这 样 能 够 优化 解析 速度 ， 显 示 空 单元 格 ; 
合并 单元 格 的 边框 线 ; 设置 表格 居中 显示 。 同 时 设置 表格 边框 为 1 像素 宽 的 浅 蓝 色 实 线 框 ， 字 体 大 
小 固定 为 12 像素 的 灰色 字体 ， 代 码 如 下 。 


table {/* 表格 基本 样式 */ 


table-layout:fixed: 谍 固定 表格 布局 ， 优 化 解析 速度 */ 
empty-cells:show: /# 显示 空 单 元 格 */ 

margin:0 auto: /# 居中 显示 */ 

border-collapse: collapse: /# 合并 单元 格 边框 */ 

border: 1px solid #cad9ea:; /# 边框 样式 */ 

color:#666: /# 灰色 字体 */ 

font-size:12px: 谍 字体 大 小 */ 


} 


p24 提示 : table-layout 是 CSS 定义 的 一 个 标准 属性 ， 用 来 设置 表格 布局 的 算法 , 取 值 包括 auto 和 fixed。 

当 取 值 为 auto 时 ， 则 布局 将 基于 单元 格 内 包含 的 内 容 来 进行 布局 ， 表 格 在 每 一 单元 格 内 
所 有 内 容 读 取 计 算 之 后 才 会 显示 出 来 ; 当 取 值 为 fixed 时 ,表示 固定 布局 算法 ,在 这 种 算 
法 中 , 表格 和 列 的 宽度 取决 于 col 对象 的 宽度 总 和 ， 如果 没有 指定 ， 则 根据 第 一 行 每 个 单 
元 格 的 宽度 。 如 果 表 格 没有 指定 宽度 ， 则 表格 被 呈 递 的 默认 宽度 为 100%。 设 置 auto 布 
局 算法 , 需要 进行 两 次 布局 计算 ,这 会 影响 客户 端的 解析 速度 ,而 fixed 布局 算法 仅 需 要 
计算 一 次 ， 所 以 速度 非常 快 。 

第 3 步 ， 定 义 列 标题 样式 。 列 标题 样式 主要 涉及 背景 图 像 的 设计 ， 有 具体 代码 如 下 。 

th {/* 列 标题 样式 */ 


background-image: url(images/th bgl.gif; /# 指定 渐变 背景 图 像 */ 
background-repeat:repeat-x; /# 定义 水 平平 铺 */ 
height:30px: /# 固定 高 度 */ 


.214 。 





第 ( 章 使 用 CSS 美 化 泰 阁 ES 


列 标题 样式 的 设计 难点 是 背景 图 像 的 制作 ， 具 体制 作 方法 这 里 就 不 再 详细 讲解 ， 读 者 可 以 参考 
本 示例 效果 ， 在 Photoshop 中 进行 设计 。 
第 4 步 ， 定 义 单元 格 的 显示 样式 。 这 里 主要 定义 单元 格 的 高 度 、 边 框 线 和 补 白 。 定 义 单元 格 左 鲜 : 
右 两 侧 补 白 的 目的 是 避免 单元 格 与 数据 拥挤 在 一 起 ， 代 码 如 下 。 





td {height:20px; /* 固定 高 度 */} /# 单元 格 的 高 度 */ 
td th {/* 单元 格 的 边框 线 和 补 白 */ 
border: 1px solid #cad9ea: /# 单元 格 边框 线 应 与 表格 边框 线 一 致 */ 
padding:0 lem 0: 谍 单元 格 左右 两 侧 的 补 白 ， 一 个 字 距 */ 
} 


第 5 步 ， 定 义 隔行 变色 样式 ， 定 义 比 边框 色 稍 浅 的 背景 色 ， 代 码 如 下 。 
tbody tr:nth-child(2n) { background-color: #fSfafe;} 


第 6 步 ， 保 存 页 面 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 7.17 所 示 。 
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图 7.17 设计 表格 效果 
7.3.5 设计 圆润 边框 表格 


本 例 使 用 CSS3 新 技术 设计 圆润 风格 的 表格 效果 : 使 用 border-radius 定义 圆 角 ; 使 用 De 
box-shadow 为 表格 添加 内 阴影 ， 设 计 高 亮 边 效果 ; 使 用 transition 定义 过 渡 动画 ， 让 鼠标 指针 移 ， 于 
过 数据 行 ， 渐 显 浅 色 背 景 ; 使 用 linear-gradient(0) 函 数 定义 标题 列 渐变 背景 效果 ， 以 替换 传统 使 用 
背景 图 像 模 拟 的 渐变 效果 ; 使 用 text-shadow 属性 定义 文本 阴影 ， 让 标题 文本 看 起 来 更 富 立 体感 。 
演示 效果 如 图 7.18 所 示 。 

【操作 步骤 】 

第 1 步 ， 新 建 HIMLS 文档 ， 复 制 7.3.4 节 示 例 的 数据 表格 结构 。 

第 2 步 ， 在 头 部 区 域 <head> 标 签 中 插入 一 个 <style type='"text/css"> 标 签 ， 在 该 标签 中 输入 下 面 样 
式 代 码 ， 定 义 表格 默认 样式 ， 并 定制 表格 外 框 主题 类 样式 。 


table { 
*border-collapse: collapse; /# 兼 容 正 7 及 以 下 版 本 浏览 器 */ 
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图 7.18 设计 圆润 边框 表格 
第 3 步 ， 继 续 输 入 下 面 样式 ， 统 一 单元 格 样 式 ， 并 定义 边框 、 空 隙 效果 。 





第 4 步 ， 输 入 下 面 样式 代码 ， 设 计 表格 标题 列 样式 ， 通 过 渐变 效果 设计 标题 列 背 景 效果 ， 并 适 
当 添 加 阴影 ， 营 造 立 体 效果 。 
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第 5 步 ， 输 入 下 面 样式 代码 ， 设 计 圆 角 效 果 。 在 制作 表格 圆 角 效果 之 前 ， 有 必要 先 完成 这 一 步 。 
表格 的 border-collapse 默认 值 是 separate， 将 其 值 设 置 为 0， 也 就 是 border-spacing:0;。 


*border-collapse: collapse; /# 兼 容 IE7 及 以 下 版 本 浏览 器 */ 
border-spacing: 0; 





} 


为 了 能 兼容 下 7 以 及 更 低 版 本 的 浏览 器 ， 需 要 加 上 一 个 特殊 的 属性 : border-collapse， 并 且 将 其 
值 设置 为 collapse。 


第 6 步 ， 设 计 圆 角 效 果 ， 有 具体 代码 如 下 。 


/*== 整 个 表格 设置 了 边框 ， 并 设置 了 圆 角 =*/ 

.bordered { border: solid #ccce 1px; border-radius: 6px;} 

/*== 表 格 头 部 第 一 个 也 需要 设置 一 个 左上 角 圆 角 =*/ 
.bordered th:first-child { border-radius: 6px 0 0 0:} 

/#== 表 格 头 部 最 后 一 个 也 需要 设置 一 个 右上 角 圆 角 ==*/ 
.bordered th:last-child { border-radius: 0 6px 0 0:} 

* 一 表格 最 后 一 行 的 第 一 个 fd 需要 设置 一 个 左下 角 圆 角 ==*/ 
.bordered tr:last-child td:first-child {border-radius: 0 0 0 6px;} 
一 表格 最 后 一 行 的 最 后 一 个 td 需要 设置 一 个 右 下 角 圆 角 一 */ 
.bordered tr:last-child td:last-child {border-radius: 0 0 6px 0:} 


第 7 步 ， 由 于 在 table 中 设置 了 一 个 边框 ， 为 了 显示 圆 角 效果 ， 需 要 在 表格 的 4 个 角 的 单元 格 上 
分 别 设置 圆 角 效果 ， 并 且 其 圆 角 效果 需要 和 表格 的 圆 角 值 大 小 一 样 ， 反 之 ， 如 果 在 table 上 没有 设置 
边框 ， 只 需要 在 表格 的 4 个 角落 的 单元 格 设置 圆 角 ， 束 能 实现 圆 角 效果 ， 代 码 如 下 。 


/*== 表 格 头 部 第 一 个 也 需要 设置 一 个 左上 角 圆 角 二 */ 

.bordered th:first-child { border-radius: 6px 0 0 0;} 

/#* 一 表格 头 部 最 后 一 个 也 需要 设置 一 个 右上 角 圆 角 一 */ 

.bordered th:last-child { border-radius: 0 6px 0 0;} 

*== 表 格 最 后 一 行 的 第 一 个 td 需要 设置 一 个 左下 角 圆 角 一 */ 

.bordered tfoot td:first-child {border-radius: 0 0 0 6px:;} 

/*== 表 格 最 后 一 行 的 最 后 一 个 td 需要 设置 一 个 右 下 角 圆 角 ==*/ 

.bordered tfoot td:last-child {border-radius: 0 0 6px 0;} 

在 上 面 的 代码 中 ， 使 用 了 许多 CSS3 的 伪 类 选择 器 。 

第 8 步 ， 除 了 使 用 CSS3 选择 器 外 ， 本 案例 还 采用 了 很 多 CSS3 的 相关 属性 ， 这 些 属 性 将 在 后 面 
章节 中 进行 详细 介绍 ， 现 简单 概括 如 下 。 

使 用 box-shadow 制作 表格 的 阴影 ， 代 码 如 下 。 


和 
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-bordered { box-shadow: 0 1px 1px #ccc:} 
使 用 transition 制作 hover 过 渡 效 果 ， 代 码 如 下 。 
-bordered tr {transition: all 0.1s ease-in-out:} 

使 用 gradient 制作 表 头 渐变 色 ， 代 码 如 下 。 


-bordered th { 
background-color: #dce9f9:; 
background-1mage: linear-gradient(to top, #ebf3fc, #dce9f9): 





} 


第 9 步 ， 使 用 CSS3 的 text-shadow 来 制作 文字 阴影 效果 ，rgba 改变 颜色 透明 度 等 。 
第 10 步 ， 为 <table> 标 签 应 用 bordered 类 样式 ， 代 人 码 如 下 。 


<table summary=" 历 届 奥 运 会 中 国 奖 牌 数 " class="bordered"> 


7.3.6 设计 数据 分 组 表格 


本 例 通过 树 形 结构 来 设计 层次 清晰 的 分 类 数据 表格 效果 。 整 个 表格 样式 设计 包含 以 下 4 个 技巧 。 

回 “” 适 当 修改 数据 表格 的 结构 ， 使 其 更 利于 树 形 结构 的 设计 。 

回 ”借助 背景 图 像 应 用 技巧 来 设计 树 形 结构 标志 。 

回 “ 借助 伪 类 选择 器 来 设计 鼠标 指针 经 过 行 时 变换 背景 颜色 。 

回 ”通过 边框 和 背景 色 来 设计 列 标题 的 立体 显示 效果 。 

【操作 步骤 】 

第 1 步 ， 新 建 HTMLS 文档 ， 复 制 7.3.5 节 示例 的 数据 表格 结构 。 

第 2 步 ， 修 改 数据 表 的 结构 。 在 修改 数据 表 结构 时 ， 不 要 破坏 数据 表 的 基本 结构 ， 主 要 强化 数据 表 

格 的 分 组 。 使 用 thead 把 标题 分 为 一 组 (标题 区 域 )， 使 用 多 个 tbody 把 数据 分 为 多 组 (数据 区 域 )。 根 

。 据 数据 分 类 的 需要 ， 在 每 个 tbody 内 部 增加 一 个 合并 的 数据 行 ， 该 行 仅 包含 了 一 个 单元 格 ， 为 了 避免 
”破坏 结构 ， 使 用 colspan="7" 合 并 单元 格 。 经 过 修改 之 后 的 数据 表格 结构 如 下 。 


<table summary=" 历 届 奥 运 会 中 国 奖牌 数 "> 
<caption> 历 届 奥 运 会 中 国 奖 牌 数 </caption> 
<thead> 
<tr></tr> 
</thead> 
<tbody> 
<tr><td colspan="7"> 第 一 时 期 </td></tr> 





2 
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第 3 步 ， 重 置 基 本 表格 对 象 的 默认 样式 。 例 如 ， 在 body 元 素 中 定义 页 面 字体 类 型 ， 通 过 table 
元 素 定义 数据 表格 的 基本 属性 ， 以 及 其 包含 文本 的 基本 显示 样式 。 同 时 统一 标题 单元 格 和 普通 单元 
格 的 基本 样式 ， 代 码 如 下 。 





第 4 步 ， 定 义 列 标题 的 立体 效果 。 列 标题 的 立体 效果 主要 借助 边框 样式 来 实现 ， 设 计 顶 部 、 左 
侧 和 右 侧 边框 样式 为 像素 宽 的 白色 实 线 ， 而 底部 边框 则 设计 为 2 像素 宽 的 浅 灰 色 实 线 ， 这 样 就 可 以 
营造 出 一 种 淡淡 的 立体 凸 起 效果 ， 代 码 如 下 。 


eg 








thead 了 th,tfoot th, tfoot td {/* 列 标题 样式 ， 立 体 效果 */ 


background: #c6ceda: /#* 背景 色 */ 
border-color: #EEFH#EEE #888 #fff: /# 配置 立体 边框 效果 */ 
border-style: solid: /# 实 线 边 框 样式 */ 
border-width: 1px 1px 2px lpx: 谍 定义 边框 大 小 */ 
padding-left: .Sem: 谍 增加 左 侧 的 补 白 */ 


第 5 步 ， 定 义 树 形 结构 效果 。 树 形 结构 主要 利用 虚线 背景 图 像 (和 
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) 来 模拟 ,借助 背景 


图 像 的 灵活 定位 特性 ， 可 以 精确 设计 出 树 形 结构 样式 。 然 后 使 用 结构 伪 类 选择 器 分 别 把 它们 应 用 到 


每 行 的 第 一 个 单元 格 中 ， 人 代码 如 下 。 
tbody tr td:first-child {/* 树 形 结构 非 末 行 图 标 样式 */ 


background: url(images/dots.gif) 18px 54% no-repeat: /# 定义 树 形 结构 末 行 图 标 */ 
padding-left: 26px: 谍 增加 左 侧 的 补 白 */ 


} 
tbody tr:last-child td:first-child {/* 树 形 结构 末 行 图 标 样式 */ 


background: url(images/dots2.gif) 18px 54% no-repeat; ”/* 定义 树 形 结构 的 末 行 图 标 */ 


padding-left: 26px: 上/# 增加 左 侧 的 补 白 
} 


人 


第 6 步 ， 为 分 类 标题 行 定义 一 个 样式 类 。 通 过 为 该 行 增加 一 个 提示 图 标 以 及 行 背景 色 ， 来 区 分 


不 同 分 类 行 之 间 的 视觉 分 类 效果 ， 代 人 码 如 下 。 


tbody tr:first-child td {/* 数据 分 类 标题 行 的 样式 */ 


background:#eee url(1mages/arrow.gif) no-repeat 12px $0%; /# 背景 图 像 ， 定 义 提示 图 标 */ 


padding-left: 28px: 上/# 增加 左 侧 的 补 白 */ 
font-weight:bold: 谍 字体 加 粗 显示 */ 
color:#444: /* 字体 颜色 */ 

} 

第 7 步 ， 设 计 当 鼠标 指针 经 过 每 行 时 变换 背景 色 颜 色 ， 以 此 显示 当前 行 效 果 ， 代 码 如 下 。 


tr:hover, td.start:hover, td.end:hover {/* 鼠标 指针 经 过 行 、 单 元 格 上 时 的 样式 */ 
background: #FF9:; /# 变换 背景 色 */ 

} 

第 8 步 ， 保 存 页 面 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 7.19 所 示 。 


s da 
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图 7.19 设计 数据 分 组 表格 效果 
7.3.7 设计 单线 表格 
本 例 在 前 面 案例 的 数据 表格 结构 的 基础 上 , 使 用 CSS3 技术 设计 一 款 单行 线 表格 ， 效 果 如 图 7.20 所 示 。 








中 国 奖牌 数 
金牌 


15 
5 
巴 奢 罗 那 (西班牙 ) 16 
亚特兰大 《美国 ; 16 
悉尼 (站 大 利 亚 ) 28 


雅典 〈 考 腊 ) 32 
北京 (中国) 引 
伦敦 〈 英 国 ) 38 
里 约 热 内 卢 【〔〈 巴 西 ) 26 


图 7.20 设计 单线 表格 效果 


【操作 步骤 】 

第 1 步 ， 新 建 HIMLS 文档 ， 复 制 7.3.6 节 示 例 的 数据 表格 结构 。 

第 2 步 ， 在 头 部 区 域 <head> 标 签 中 插入 一 个 <style type="text/css"> 标 签 ， 在 该 标签 中 输入 下 面 样 
式 代 码 ， 定 义 表格 默认 样式 ， 并 定制 表格 外 框 主题 类 样式 。 


table { 
*border-collapse: collapse; /* IE7 and lower */ 
border-spacing: 0; 
width: 100%; 
} 
第 3 步 , 设计 单元 格 样式 以 及 标题 单元 格 样式 ， 取 消 标题 单元 格 的 默认 加 粗 和 居中 显示 ,代码 如 下 。 
.table td, .table th { 
padding: 4px:; /# 增 大 单元 格 补 白 ， 避 人 免 拥 挤 */ 
border-bottom: 1px solid #f2f2f2: /# 定义 下 边框 线 */ 
text-align: left: /# 文本 左 对 齐 */ 
font-weight:normal: 谍 取消 加 粗 显示 */ 
} 


a 
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第 4 步 ， 为 列 标题 行 定义 渐变 背景 ， 同 时 增加 高 亮 内 阴影 效果 ， 为 标题 文本 增加 淡淡 阴影 色 ， 
代码 如 下 。 


£4 1 
.table thead th { 


text-shadow: 0 lpx lpx rgba(0,0,0,.1); 
border-bottom: 1px solld #ccece; 
background-color: #eee: 


background-1mage: linear-gradient(to top, #{5f5f5, #eee); 





第 5 步 ， 设 计数 据 隔行 换 色 效果 ， 代 码 如 下 。 


.table tbody tr:nth-child(even) { 

background: #f5f5f5:; 

box-shadow: 0 1px 0 rgba(255,255,255,.8) Inset: 
} 


第 6 步 ， 设 计 表格 圆 角 效果 ， 代 码 如 下 。 


上 # 左上 角 圆 角 */ 

.table thead th:first-child { border-radius: 6px 0 0 0;} 

上 # 右上 角 圆 角 */ 

.table thead th:last-child {border-radius: 0 6px 0 0:} 

上 # 左下 角 圆 角 */ 

.table tfoot td:first-child, .table tfoot th:first-child{ border-radius: 0 0 0 6pxX:} 
谍 右 下 角 圆 角 */ 

.table tfoot td:last-chlld.,.table tfoot th:last-child {border-radius: 0 0 6px 0;} 


7.3.8 设计 日 历 表 


日 历 表 在 网 页 中 经 常 看 到 ， 它 适合 使 用 表格 结构 进行 设计 。 本 例 设计 的 是 一 个 相对 比较 简单 的 
日 历 表 ， 其 中 有 当天 日 期 状态 和 文字 说 明 ， 双 休 日 以 红色 文字 浅 灰 色 背 景 显 示 ， 同 时 将 周 日 到 周一 
的 标题 加 粗 显 示 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 mdex.html， 在 <body> 标 签 内 输入 以 下 代码 。 





<table> 
<caption>2017 年 7 月 1 日 </caption> 
<thead> 
<tr> 


<th> 日 </th> 


“a 
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<th> 一 一 /th> | 
<th> 二 </th> | 
<th> 二 </th> | 
<th> 四 </th> 
<th> 五 </th> 
<th> 六 </th> 
</tr> 
</thead> 
<tbody> | 
<tr><td>29</td><td>30</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> 
<tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> 
<tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td></tr> 
<tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td></tr> 
<tr><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td>1</td><td>2</td></tr> 
<tr><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr> 
</tbody> 
</table> 





日 历 表 以 表格 结构 形式 表示 ， 不 仅 在 结构 上 表达 了 日 历 是 一 种 数据 型 的 结构 ， 而 且 能 更 显著 地 
在 页 面 无 CSS 样式 情况 下 表现 日 历 表 应 该 具有 的 结构 ， 如 图 7.21 所 示 。 


区 
< 一 > (+#J- | 多 http://localho... ~ 有 CC 合 9 历 表 
2017 年 7 月 1 日 
日 一 二 三 四 五 六 
2930123435 
6789 101112 


13 14 13 16 17 18 19 
20 21 22 23 24 23 26 
21282930311 2 
34536789 





图 7.21 无 CSS 样式 的 日 历 表 


第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 
样式 ， 设 计 表 格 框 样式 。 


table {/* 定义 表格 文字 样式 */ 

border-collapse:collapse: /* 合并 单元 格 之 间 的 边框 */ 

border:1px solid #DCDCDC:; 

font:normal 12px/1.Sem Arial, Verdana, Lucida, Helvetica, sans-serif: 
} 


Se 





(Csss+zpyy 网 页 样式 与 市 局 从 入 门 到 精通 ( 微 课 精 编 版 ) 


合并 表格 单元 格 之 间 的 边框 ， 设 计 表 格 内 对 象 的 继承 样式 。 例 如 ， 单 元 格 之 间 的 边框 合并 ， 文 


字样 式 。 考 虑 日 历 表 中 显示 的 内 容 以 数字 居多 ， 因 此 文字 主要 采用 了 英文 字体 。 





第 3 步 ， 设 计 表 格 标题 样 式 。 设 置 表 头 的 高 度 属性 和 文字 颜色 ， 代 码 如 下 。 
caption { /# 定义 表 头 的 样式 ， 文 字 居 中 等 */ 


text-align:center:; 
line-height:46px:; 
font-size:20px; 
color: blue: 


} 
第 4 步 ， 设 计 单元 格 基 本 样式 ， 代 码 如 下 。 


td, th {/* 将 单元 格 内 容 和 单元 格 标题 的 共同 点 归 为 一 组 样式 定义 */ 
width: 40px:; 
height: 40px:; 
text-align: center:; 
border: 1px solid #DCDCDC: 
} 
th {/* 针对 单元 格 标题 定义 样式 ， 使 其 与 单元 格 内容 产 生 区 别 */ 
color: #000000; 
background-color: #EEEEEE:; 
} 


单元 格 内 容 td 标签 和 单元 格 标 题 也 标签 所 需要 的 样式 只 有 背景 颜色 和 文字 颜色 的 不 同 , 因此 可 以 将 


这 两 个 元 素 归 为 一 个 组 定义 样式 ， 然 后 单独 针对 单元 格 标题 定义 背景 颜色 和 文字 颜色 。 这 样 的 处 理 方式 
不 仅 减 少 了 CSS 样式 的 代码 ， 也 能 使 CSS 样式 代码 更 加 直观 ， 对 于 后 期 维护 也 会 带 来 不 少 的 帮助 。 


第 5 步 ,单元 格 <td> 标 签 中 所 显示 的 时 间 是 当前 系统 所 显示 的 时 间 , 添 加 一 个 名 为 current 的 class 


类 名 ， 并 将 其 CSS 样式 定义 成 与 其 他 单元 格 内 容 不 同 ， 突 出 显示 当前 日 期 。 而 且 .current 类 还 有 一 个 
作用 ， 就 是 为 程序 开发 人 员 提 供 一 个 接口 ， 方 便 他 们 在 程序 开发 的 过 程 中 调用 这 个 类 名 ， 便 于 判断 
系统 当前 日 期 后 为 页 面 实现 效果 ， 代 码 如 下 。 


td.current {/* 定义 当前 日 期 的 单元 格 内 容 样式 */ 
font-weight:bold:; 

color:#FFFFFF: 

background-color: blue; 


} 


第 6 步 ， 设 计 .curent 类 之 后 ， 把 该 类 绑 定 到 表格 当日 单元 格 中 ， 如 <td class="current">1</td>。 
第 7 步 ， 日 历 表 中 为 了 能 更 好 地 体现 某 个 月 份 的 上 一 个 月 份 的 月 尾 几 天 和 下 一 个 月 份 的 月 头 几 天 在 


当前 月 份 中 的 位 置 ， 可 以 在 页 面 中 添加 该 内 容 ， 并 通过 CSS 样式 将 其 视觉 效果 弱化 ， 代 码 如 下 。 


td.last month, tdnext month {color:#DFDFDF:} /* 定义 上 个 月 和 下 个 月 日 期 在 当前 月 中 的 文字 颜色 */ 


.224 . 
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第 8 步 ,设计 .last_month 和 anext_ month 类 之 后 , 把 这 两 个 类 绑 定 到 表格 非 当月 单元 格 中 , 代码 如 下 。 | 





第 9 步 ， 设 计 表 格 列 组 样式 。 在 表格 框 <table> 内 部 前 面 添加 如 下 代码 。 


第 10 步 ， 使 用 <colgroup> 标 签 为 表格 的 前 后 两 列 〈 即 双休日 ) 的 日 期 定义 一 种 样式 ， 以 区 别 于 
其 他 单元 格 内 容 中 的 日 期 ， 代 码 如 下 。 


a 
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tr>td+td { 
color:#333333; 
backeround-color:#FFFFFF: 
} * 定义 中 间 五 列 单元 格 内 容 的 样式 */ 
col.day off { 
color:#B3222B: 
background-color:#F 8F 8F 8; 
} Ap#* 针对 正 浏览 器 定义 双休日 的 单元 格 样式 */ 





其 中 ，tr>td 子 选 择 符 是 将 所 有 的 单元 格 内 容 <td> 标 签 设置 文字 颜色 和 背景 颜色 ; tr>tdttd+td+td+ 
td+td+ttd 是 子 选择 符 与 相 邻 选择 符 的 结合 , 定义 最 后 一 列 单元 格 内 容 <td> 标 签 的 文字 颜色 和 背景 颜色 ; 再 
次 定义 tr>td+ttd 是 将 除了 第 一 列 以 外 的 所 有 单元 格 内 容 <td> 标 签 定 义 样 式 ， 但 因为 CSS 优先 级 的 关系 ， 
无 法 履 兰 最 后 一 列 单元 格 <td> 标 签 的 样式 。 最 终 形成 的 是 前 后 两 列 的 样式 与 中 间 五 列 的 样式 不 同 。 

col.day o 任 是 针对 正 浏览 器 而 定义 样式 ， 主 要 是 第 一 列 与 最 后 一 列 的 文字 颜色 和 背景 颜色 。 该 选 
择 符 的 定义 方式 需要 XHTML 结构 的 支持 ,读者 可 以 查看 XHTML 结构 中 <col> 标 签 选择 控制 列 的 方式 。 

第 11 步 ， 设 计 完 毕 ， 保 存 页 面 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 7.22 所 示 。 


| +)- @ htpy/localho ~ 有 dc|‖ 外 日 万 表 


2017 年 7 月 1 日 





图 7.22 日 历 表 页 面 设计 效果 


74 在 线 练 习 


下 面 通过 大 量 的 线 上 示例 ,帮助 初学 者 练习 使 用 HIMLS 设计 表格 结构 和 样式 。 感 兴趣 的 读者 可 
以 扫 码 练习 。 
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大 早 


使 用 CSS 美化 表单 


表单 是 网 页 交互 的 基础 ， 网 站 一 般 都 借助 表单 实现 用 户 与 服务 器 之 间 的 信息 交流 ， 如 


注册 表 、 登 录 表 、 调 查 表 和 留言 表 等 。 HTMILS5 新 增 了 很 多 表单 控件 ， 完 善 了 部 分 表单 控件 
的 功能 ， 新 特性 提供 了 更 好 的 用 户 体 验 和 输入 控制 。 


【 学 习 要 点 】 

| 正确 使 用 各 种 表单 控件 。 
六 可 查 表单 属性 的 设置 。 
| 设计 易 用 性 表单 页 面 。 


(sss+DN0 网 页 样式 与 布 局 从 入 门 到 精通 ( 微 梨 精 编 版 ) 





8.1 HTMLS5 表单 基础 


与 表格 一 样 ， 表 单 也 包含 多 个 标签 ， 它 由 很 多 控件 构成 ， 如 文本 框 、 文 本 区 域 、 单 选 按钮 、 复 
选 杠 、 下 拉 菜 单 和 按钮 等 。 一 般 情况 下 ， 表 单 结构 可 分 为 以 下 3 个 部 分 。 

加 ”表单 框 : 使 用 <form> 标 签 定义 , 主要 功能 是 定义 提交 表单 的 处 理 方法 、URL 和 字符 编码 等 。 

名 ”表单 对 象 : 包括 文本 框 、 密 码 框 、 隐 藏 域 、 多 行文 本 框 、 复 选 框 、 单 选 按钮 、 下 拉 选 择 框 、 

文件 上 传 框 、 提 交 按 钮 、 复 位 按钮 和 一 般 按 钮 等 。 

四 ”辅助 对 象 : 包括 提示 性 标 和 位 <label>、 表 单 对 象 分 组 标签 <fieldset>, 用 于 表单 结构 的 辅助 设计 。 

【示例 】 新 建 网 页 ， 保 存 为 testhtml， 在 <body> 内 使 用 <form> 标 签 包 含 两 个 <input> 标 签 和 一 个 提 
交 按 钮 ， 并 借助 <p> 标 签 把 按钮 和 文本 框 分 行 显示 ， 代 码 如 下 。 








<form action="#" method="get" 1d= "form1" name="form]1"> 
<p> 用 户 名 : <input name="" type="text" /></p> 
<p> 密 码 : <input name="" type="text" /></p> 
<p><input type="submit" value=" 提 交 "/></p> 


</form> 


在 下 浏览 器 中 预览 ， 演 示 效 果 如 图 8.1 所 示 。 











图 8.1 表单 的 基本 效果 


HTMLS 定义 了 多 个 表单 标签 ， 简 单 说 明 如 表 8.1 所 示 。 
表 8.1 HTML 表单 标签 及 其 说 明 


| 标 签 说 了 明 

: <fom> 定义 供用 户 输 入 的 _HTML 表单 
<input> 定义 输入 控件 

<textarea> 定义 多 行 的 文本 输入 控件 

: <button> 定义 按钮 

: <select> 定义 选择 列表 (下 拉 列 表 ) 

| <optgroup> 定义 选择 列表 中 相关 选项 的 组 合 
”<option> 定义 选择 列表 中 的 选项 


人 





标 签 
<label> 

<fieldset> 
<legend> 
<1SIndex> 
<datallst> 
<keygen> 


=output> 
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说 。 明 
定义 input 元 素 的 标注 
定义 围绕 表单 中 元 素 的 边框 
定义 fieldset 元 素 的 标题 
定义 与 文档 相关 的 可 搜索 索引 ， 不 赞成 使 用 
HIMLS 新 增 标签， 定义 下 拉 列 表 
HIMLS 新 增 标签 ， 定 义 生 成 密 钥 
HIMLS 新 增 标签 ， 定 义 输出 的 一 些 类 型 





<inpu 世 标签 是 通用 输入 型 表单 对 象 ， 使 用 它 可 以 定义 多 种 类 型 的 表单 对 象 ， 男 外 HTMLS 又 扩 


展 了 很 多 和 输入 型 表单 对 象 ， 简 单 说 明 如 表 8.2 所 示 。 


表 8.2 <input> 标 签 可 定义 的 输入 型 表单 对 象 及 其 说 明 


表单 对 象 
<Inpnut type="text"> 
<Input type="password"> 
<Inpnut type="checkbox"> 
<Inpnut type="Tadlo"> 
<Input type="file"> 
<Inpnut type="submit"> 
<Inpnult type="reset"> 
<Input type="color"> 
<Input type= "date"> 
<Input type="time"> 
<Inpnut type="datetime"> 
<Input type="datetime-local"> 
<Inpnut type="week"> 
<Inpnut type="month"> 
<Input type="email"> 
<Input type="tel"> 
<Inpnut type="url"> 
<Input type="number"> 
<Input type="range"> 


<Inpnut type="search"> 


说 明 
单行 文本 输入 框 
密码 输入 框 〈 输 入 的 文字 用 点 号 表示 ) 
单 选 按钮 
文件 域 


将 表单 (form) 里 的 信息 提交 给 表单 属性 action 所 指向 的 文件 
将 表单 (form) 里 的 信息 清空 ， 重 新 填写 

HTMLS 新 增 对 象 ， 颜 色 选 择 器 

HITMLS 新 增 对 象 ， 日 期 选择 器 

HTMLS 新 增 对 象 ， 时 间 选 择 器 

HTMLS 新 增 对 象 ，UTC 日 期 时 间 选 择 器 

HTMLS 新 增 对 象 ， 本 地 日 期 时 间 选 择 器 

HIMLS 新 增 对 象 ， 选 择 第 几 周 的 文本 框 

HTMLS 新 增 对 象 ， 月 份 选择 器 

HTMLS5 新 增 对 象 ，Email 输入 框 

HTMLS 新 增 对 象 ， 电 话 号 码 输入 框 

HTMLS 新 增 对 象 ，URL 输入 框 

HTMLS 新 增 对 象 ， 只 能 输入 数字 的 文本 框 

HTMLS 新 增 对 象 ， 拖 动 条 或 滑 块 

HITMLS 新 增 对 象 ， 搜索 文本 框 ， 与 type="text"; 定 义 的 文本 框 没 有 太 大 区 别 


a 
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82 案例 实战 





CSS 没有 为 表单 定义 专用 属性 ， 不 过 可 以 使 用 CSS 其 他 属性 来 设计 表单 样式 ， 如 字体 、 背 景 、 
颜色 、 边 杠 、 边 距 等 。 注 意 ， 由 于 部 分 表单 对 象 是 相对 复杂 的 控件 ， 如 下 拉 菜 单 、 文 件 域 、 复 选 框 、 
单 选 按钮 等 ， 使 用 CSS 可 能 无 法 完美 控制 其 外 观 ， 必 要 时 需要 JavaScript 脚本 辅助 实现 。 


8.2.1 设计 登录 表单 
本 例 将 设计 一 款 个 性 的 登录 表单 页 面 ， 效 果 如 图 8.2 所 示 。 








图 8.2 设计 网 站 登录 页 面 效果 


【操作 步骤 】 
第 1 步 ， 新 建 HIMLS 文档 ， 保 存 为 ndex.html。 打 开 网 页 文档 ， 设 计 如 下 表单 结构 。 


<form 1d="login-form" action="#" method="post"> 
<fieldset> 
<legend> 登 录 </legend> 
<label for="login">Email</label> 
<input type="text" 1d="login" name="login"/> 
<div class="clear"></div> 
<]label for="password"> 密 码 </label> 
<input type="password" 1d="password" name="password"/> 
<div class="clear"></div> 
<]label for="remember me" style="padding: 0;"> 记 住 状态 ?</label> 
<input type="checkbox" 1d="remember me" name="remember me"/> 
<div class="clear"></div><br /> 
<input type="submit" class="button" name="commit" value=" 登 录 "/> 
</fieldset> 
</form> 


<p align="center"><strong>&copy; WWW.XXXxxx.cn</strong></p> 


2" 
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第 2 步 ， 为 form 元 素 定 义 id 属性 ， 以 便 对 整个 表单 进行 控制 ， 同 时 方便 设计 ID 样式 。 
第 3 步 ， 新 建 CSS 样式 表 文 件 ， 命 名 为 style.css， 保 存 到 images 文件 夹 中 ， 然 后 在 页 面 头 部 区 
域 导 入 该 样式 表 ， 代 码 如 下 。 


<link rel="stylesheet" type="text/css" href~—"i1mages/style.css" /> 

第 4 步 ， 通 过 通 配 选 择 占 消除 页面 中 所 有 标签 的 内 外 边 距 ， 代 人 码 如 下 。 

* { margin: 0; padding: 0: } 

第 5 步 ， 在 body 元 素 中 定义 网 页 字体 效果 ， 如 类 型 、 大 小 和 颜色 ， 设 计 网 页 背景 图 像 ， 并 让 背 
景 图 像 俩 上 居中 显示 ， 茶 止 平 铺 ， 同 时 设置 背景 图 像 无 法 履 凋 的 区 域 颜色 显示 为 浅 灰 色 〈 拓 4c4c4)， 
代码 如 下 。 

body { font-family: Georgia, serif: background: url(login-page-bg.jpg) center -S0pX no-repeat #c4c4c4:; color: 
#3a3a3a; } 

第 6 步 ， 定 义 消除 样式 类 ， 以 便 控 制 页面 中 每 个 表单 域 的 换行 显示 ， 代 人 码 如 下 。 

.Clear { clear: both: } 

第 7 步 ， 设 计 表单 对 象 样 式 。 其 中 通过 属性 选择 器 控制 复 选 框 的 样式 ， 代 码 如 下 。 


form { width: 406px; margin: 120px auto 0; } 

legend { display: none; } 

fieldset { border: 0; } 

label { width: 11Spx: text-align: right: float: left; margin: 0 10px 0 0; padding: 9px 0 0 0; font-size: 16px: } 

Input { width: 220px; display: block:; padding: 4px; margin: 0 0 10px 0; font-size: 18px:; color: #3a3a3a; 
font-family: Georgla, serif: } 

input[type=checkbox] { width: 20px; margin: 0; display: nline-block; } 


第 8 步 ， 设 计 按 钮 在 鼠标 指针 经 过 和 未 经 过 时 的 状态 样式 ， 代 码 如 下 。 


-button { background: url(button-bg.png) repeat-x top center; border: lpx solid #999:; -moz-border-radius: Spx; 
padding: Spx; color: black: font-welght: bold; -webkit-border-radius: Spx; font-slze: 13px; width: 70px: } 
.button:hover { background: whlte: color: black: } 


8.2.2 设计 信息 登记 表 


在 设计 表单 时 ， 正 确 选 用 各 种 表单 控件 很 重要 ， 这 是 结构 标准 化 和 语义 化 的 要 求 ， 也 是 用 户 体 
验 的 需要 。 例 如 : 
MM 不 确定 答案 可 以 建议 用 户 输 入 ， 而 不 是 让 用 户 选 择 ， 如 姓名 、 地 址 、 电 话 等 常用 信息 ， 使 
用 输入 的 方式 收集 会 比 使 用 选择 的 方式 收集 更 加 目 然 且 简 单 。 
加 ”对 于 容易 记 错 的 答案 不 妨 让 用 户 选 择 ， 此 时 就 不 适合 让 用 户 使 用 输入 框 来 输入 ， 如 国家 、 


.al 
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年 、 月 、 日 、 星 座 等 ， 可 以 使 用 单 选 按钮 组 、 复 选 框 、 列 表 框 、 下 拉 菜 单 等 形式 。 

四 ” 当 设 计 选 择 项 目 时 ， 如 果 和 希望 用 户 浏览 所 有 选项 ， 则 应 该 使 用 单 选 按钮 组 或 复 选 框 组 ， 而 
不 应 该 使 用 下 拉 菜 单 。 下 拉 菜 单 会 隐藏 部 分 选项 ， 对 于 用 户 来 说 ， 可 能 不 会 耐心 地 逐个 浏 
览 每 个 菜单 项 。 

四 ”当选 项 很 少时 ， 不 妨 考 虑 使 用 单 选 按钮 组 或 复 选 框 组 ， 而 选项 较 多 时 ， 使 用 单 选 按钮 组 或 
复 选 框 会 占用 很 大 的 页 面 ， 此 时 不 妨 考虑 使 用 下 拉 沫 单 。 

四 ”多 项 选择 可 以 有 两 种 设计 方法 : 使 用 复 选 框 或 者 使 用 列表 框 。 使 用 复 选 框 比 使 用 列表 框 更 
直观 ， 有 些 用 户 不 清 茎 列表 框 的 作用 和 操作 方法 ， 这 时 束 需 要 加 上 说 明 性 文字 ， 显 然 这 样 





做 没有 使 用 复 选 框 简单 。 
贸 ”为 控件 设置 默认 值 ， 建 议 采 用 一 些 提 示 性 说 明文 字 或 常用 值 ， 能 够 提醒 用 户 输入 ， 这 是 一 
个 很 人 性 化 的 设计 。 


四 ”对 于 单 选 按钮 组 、 复 选 框 或 下 拉 菜 单 , 设计 控件 的 value 属性 值 或 显示 值 应 从 用 户 的 角度 考 
虑 ， 努 力 使 用 户 浏 览 选 项 的 时 候 更 方便 、 简 单 ， 避 人 免 出 现 卜 义 或 误解 的 值 。 

四 ”对 于 单 选 、 复 选 的 选项 ， 应 减少 选项 的 数量 ， 同 时 也 可 以 使 用 短语 来 作为 选项 。 

四 ”对 于 选项 的 排列 顺序 ， 最 好 遵循 合理 的 逻辑 顺序 ， 如 按 首 字母 排列 、 按 声母 排列 等 ， 并 根 
据 普遍 情况 确定 默认 值 。 

四 ”设计 表单 时 ， 应 该 避免 使 用 多 种 表单 控件 ， 使 用 多 种 表单 控件 能 够 使 页 面 看 起 来 更 好 看 ， 
但 实际 上 不 利于 用 户 的 操作 。 

下 面 介 绍 如 何 设计 一 个 信息 登记 表 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建 HIMLS 文档 ， 保 存 为 index.html。 

第 2 步 ， 在 页 面 中 构建 HIML 导航 框架 结构 。 切 换 到 代码 视图 ， 在 <body> 标 签 内 手动 输入 下 面 

代码 ， 定 义 表单 框架 结构 。 


<form action="#" class="form1"> 


<p><em>*#</em> 号 所 在 项 为 必 填 项 </p> <!-- 提示 段落 --> 
<fieldset class="fld1"> <!-- 字段 集 1 --> 
<legend> 个 人 信息 </legend> <!-- 字段 集 1 标题 --> 
<ol> <!-- 字段 集 1 内 嵌 列 表 --> 

<]1> 


<label for="name"> 姓 名 <em>*</em></label> ”<!-- 说 明 标 签 ， 以 下 类 同 --> 
<Inpnut 1d="name"> 
</l> 
<]1> 
<]label for="address"> 地 址 <em>*</em></label> 
<Inpnut 1d="address"> 
</l> 


< 一]1> 


Ids 
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第 3 步 ， 在 <head> 标 签 内 输入 <style type="text/css">， 定 义 一 个 内 部 样式 表 ， 然 后 在 <style> 标 签 
内 手动 输入 下 面 样式 代码 。 








. 234 。 
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第 4 步 ， 保 存 文 要 ， 按 F12 功能 键 ， 在 浏览 器 中 预览 ， 效 果 如 图 8.3 所 示 。 


本 





HE http://localhost/mysite/index.html Pr-ac 


* 号 所 在 项 为 必 填 项 








*[ | 
出 生 #|1 v| |Jan v| 1979 v 
性 别 * [ 女 ~| 
其 他 信息 
你 喜欢 这 个 表单 国 ? > 
〇 喜欢 O 〇 不 喜欢 
你 喜欢 什么 运动 ? 
口 足球 口 答 球 
请 瑟 下 你 的 建议 ? * 
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图 8.3 ”定义 表单 结构 
8.2.3 设计 易 用 表单 


表单 设计 应 考虑 用 户 的 易 用 性 ， 表 单 布局 (如 控件 摆 放 位 置 、 对 齐 方式 、 标 签 信息 与 周围 元 素 ) 
的 设计 会 或 多 或 少 影响 用 户 的 操作 。 为 此 ， 在 设计 表单 布局 时 ， 不 妨 从 下 面 几 个 角度 思考 ， 来 提高 
自己 的 设计 水 平 。 

1. 排列 方式 


根据 习惯 ， 表 单 控件 一 般 使 用 垂直 排列 方式 进行 分 布 ， 这 样 能 够 加 快 视觉 的 移动 和 操作 。 水 平 
排列 容易 使 视觉 移动 起 来 很 累 ， 即 使 多 列 有 规律 的 布局 也 是 不 可 取 的 ， 人 有 眼 左右 晃动 操作 很 容易 出 
错 ， 如 图 8.4 所 示 (index1.html)。 


2. 控件 分 组 

给 控件 分 组 也 是 表单 布局 中 一 个 重要 的 技巧 ， 特 别 是 表单 控件 很 多 时 ， 分 组 就 显得 很 有 必要 ， 
实际 上 分 组 是 帮助 用 户 进行 逻辑 梳理 ， 避 免 混乱 。 

例如 ， 图 8.5 所 示 (index2.html) 表单 域 由 于 没有 实现 分 组 ， 看 起 来 很 容易 混乱 ， 这 样 就 会 影响 
操作 速度 ， 每 填写 一 项 信息 都 需要 短暂 的 停留 ， 并 进行 思考 。 如 果 将 其 分 为 3 组 : 个 人 信息 、 地 址 
和 联系 信息 ， 就 会 使 用 户 在 填写 表单 时 思路 很 清晰 。 

3. 缩 进 分 布 

当 分 组 标题 、 控 件 和 提示 信息 都 并 列 排 在 一 起 时 ， 很 容易 出 现 主 次 不 分 的 情况 ， 用 户 需 要 分 辨 
哪些 是 操作 的 行 ， 哪 些 是 说 明 性 文字 ， 这 样 会 影响 操作 速度 。 对 此 ， 可 以 采用 缩 进 的 方式 ， 实 现 多 
层次 登 进 ， 帮 助 读者 快速 进行 阅读 ， 如 图 8.6 所 示 (index3.html)。 
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图 8.4 排列 方式 图 8.5 控件 分 组 














4. 标签 突出 


一 般 标签 与 控件 水 平 并 列 分 布 是 最 佳 的 分 布 方 式 。 部 分 用 户 喜 欢 使 用 垂直 分 布 方式 ， 即 标签 在 
上 一 行 ， 控 件 在 下 一 行 ， 这 种 方式 对 于 内 容 较 少 的 表单 域 来 说 可 行 ， 但 如 果 是 一 个 大 型 表单 ， 这 种 
方式 会 消耗 用 户 的 视力 ， 降 低 操 作 速 度 。 

在 表单 布局 中 ， 推 荐 使 用 加 粗 的 标签 ， 这 可 以 增加 它们 的 视觉 比重 ， 提 高 其 显著 性 。 否 则 ， 从 
用 户 的 角度 分 析 ， 标 签 与 输入 框 的 文字 有 时 会 一 样 ， 可 能 会 产生 混 消 的 现象 ， 如 图 8.7 所 示 
(index4.html ) 。 
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图 8.6 缩 进 分 布 图 8.7 标签 突出 
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5. 标签 对 齐 
关于 标签 是 左 对 齐 还 是 右 对 齐 的 问题 ， 一 般 来 说 ， 一 致 的 左 对 齐 可 以 减少 眼睛 移动 和 处 理 的 时 
， 间 。 左 对 齐 的 标签 还 容易 通 览 表单 信息 ， 用 户 只 需要 看 左 侧 标签 即 可 ， 而 不 会 被 控件 打 断 思路 。 但 
”这样 也 容易 使 标签 与 其 对 应 的 控件 之 间 的 距离 被 更 长 的 标签 拉 大 ， 从 而 影响 操作 表单 的 时 间 。 用 户 
必须 左右 来 回 移动 视线 找到 两 个 对 应 的 标签 和 控件 ， 如 图 8.8 所 示 (index5.html)。 
: 而 标签 右 对 齐 布 局 就 会 避免 这 个 问题 ， 使 得 标签 和 控件 之 间 均 匀 分 布 并 保持 更 紧密 的 联系 ， 而 
这样 分 布 的 缺点 是 标签 左边 参差 不 齐 的 空 日 会 影响 用 户 快速 检索 表单 填写 内 容 。 对 此 ， 可 以 根据 实 
， 际 情况 有 选择 地 使 用 标签 左右 对 齐 方 式 。 

6. 背景 和 辅助 线 


: 上 面 所 介绍 的 是 一 些 基本 的 布局 方法 ， 实 际 上 改善 表单 布局 的 方法 还 有 很 多 ， 尝 试 为 表单 控件 
， 适当 添加 背景 色 和 分 割 线 ， 通 过 背景 色 和 辅助 线 的 视觉 区 分 ， 也 能 加 快 用 户 操作 速度 ， 这 对 于 划分 
， 操作 区 信息 是 很 有 效 的 。 

背景 色 和 线条 对 于 区 分 表单 的 主要 操作 按钮 尤其 有 效 。 但 在 使 用 这 些 辅助 元 素 时， 要 避免 它们 
影响 用 户 的 操作 ， 因 为 色彩 过 浓 的 线条 和 背景 色 都 能 够 分 散 用 户 的 视线 ， 过 多 的 分 格 线 会 给 用 户 阅 
， 读 带 来 障碍 ， 如 图 8.9 所 示 (index6.html)。 
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图 8.8 ”标签 对 齐 图 8.9 背景 和 辅助 线 
7. 动态 效果 
当 用 户 选中 或 操作 某 个 表单 控件 时 ， 当 前 表单 对 象 会 显示 为 另 一 种 样式 ， 以 区 别 其 他 控件 。 这 


“个 技巧 对 于 用 户 的 操作 具有 提示 作用 ， 吕 免 出 现 用 户 有 时 不 知 当前 操作 的 是 哪个 表单 控件 的 情况 ， 
如 图 8.10 所 示 (index7.html)。 
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图 8.10 动态 效果 


当 表 单 控件 很 多 时 ， 通 过 添加 类 样式 ， 就 可 以 让 表单 更 具 提 示 性 ， 也 使 用 户 有 更 好 的 体验 。 为 
某 个 控件 定义 伪 类 ， 如 :hover、:focus 和 :focus:hover 属性 样式 ， 让 输入 框 被 鼠标 激活 时 更 加 突出 ， 利 
于 用 户 集 中 精神 填写 。 当 然 这 对 于 老 版 本 的 正 浏览 器 没有 作用 ， 此 时 用 户 需 要 使 用 JavaScript 脚本 
来 控制 。 


8.2.4 设计 注册 表单 


设计 表单 时 ， 一 般 用 户 喜 欢 设计 表单 对 象 的 边框 ， 以 便 实 现 表单 与 页 面 整体 效果 的 融合 。CSS 
盒 模型 适用 任何 表单 对 象 ， 所 以 可 以 使 用 任何 盒 模型 属性 来 定义 表单 对 象 。 注 意 ， 除 了 form 元 素 是 
块 状 元 素 之 外 ， 其 他 元 素 都 以 内 联 元 素 显 示 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建 HIMLS 文档 ， 保 存 为 mdex.html。 

第 2 步 ， 在 页 面 中 构建 HIML 导航 框架 结构 。 切 换 到 代码 视图 ， 在 <body> 标 签 内 手动 输入 下 面 
代码 ， 定 义 表单 框架 结构 。 


<div 1d="box"><form 1d=form] action=#public method=post enctype=multipart/form-data> 
<h2> 个 人 信息 注册 表单 </h2> 
<ul> 
<li class="label"> 姓 名 
<l1i> <input 1d=field] size=20 name=field1> 
<li class="label"> 职 业 
<]> <input name=field2 1d=field2 size="25"> 


a 
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<li class="label"> 详 细 地 址 

<]><Input name=field3 1d=field3 slze="S0"> 

<li class="label"> 邮 编 

<]><Input name=field4 1d=field4 size="12" maxlength="12"> 
<li class="label"> 省 市 

<]><Input 1d=field$ name=fieldS> 

<li class="label"> 国 家 


<l1> <select 1d=field6 name=field6> 





<option value=china>China</option> 
<option value=armenia>Armenia</option> 
<option value=australia>Australia</option> 
<option value=italy>Italy</option> 
<option value=]Japan>Japan</option> 
</select> 
<li class="label">Email 
<]><Input 1d=field7 maxlength=255 name=fieldl1> 
<]i class="label"> 电 话 
<li><input maxlength=3 size=6 name=field8>- 
<Input maxlength=8 size=16 name=field8-1> 
<li class="label"><input id=saveform type=submit value= 提 交 ></li> 
</ul> 


</form> </div> 


第 3 步 ， 在 <head> 标 签 内 输入 <style type="text/css">， 定 义 一 个 内 部 样式 表 ， 然 后 在 <style> 标 签 
内 手动 输入 下 面 样式 代码 。 


body { 
margin: 0; padding:0:; 
font-family: "lucida grande", tahoma, arial, verdana, sans-sernif: 
} 

#box{ 
background:url(1mages/bg].jpg); 
width:1015Spx: height:770px: 
} 

#forml { 
width:450px; 
text-align:left:; font-size: 12px:; 
padding:12px 32px: margin:0 auto; 
} 
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#forml] h2 { 
border-bottom:dotted 1px #E37EAS6; 
text-align:center; | 
font-weightnormal: /* 清除 标题 加 粗 默 认 样式 */ > 
) 
uu {/* 清除 列表 样式 */ | 
padding:0; margin:0; 
list-style-type:none; 
} 
input {border:groove #ccc 1px: } /# 定义 3D 四 模 立 体 效果 */ 
.field6 { color:#666; width:32px;} 
.label { 
font-slze:13px: font-welght:bold: 





margin-top:0.7em.; 
} 


第 4 步 ， 保 存 文档 ， 按 F12 功能 键 ， 在 浏览 器 中 预览 ， 效 果 如 图 8.11 所 示 。 


二 sl http://localhost/mysite/index.html Dr Ec 疤 localhost 
一 





个 人 信息 注册 表单 





图 8.11 设置 表单 样式 


8.2.5 设计 联系 表单 





本 例 设计 一 个 联系 表单 ， 使 用 CSS 背景 图 像 来 设计 表单 样式 ， 使 其 更 具 艺 术 性 。 视频 
【操作 步骤 】 


第 1 步 ， 启 动 Dreamweaver， 新 建 HIMLS 文档 ， 保 存 为 mdex.html。 
第 2 步 ， 在 页 面 中 构建 HIML 导航 框架 结构 。 切 换 到 代码 视图 ， 在 <body> 标 签 内 手动 输入 下 面 
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代码 ， 定 义 表单 框架 结构 。 





<form 1d="fieldset" action="default.asp" method="post"> 
<h2> 联 系 表单 </h2> 
<]label for=name> 姓 名 </label> 
<input class="textfield" 1d="name" name="name"><br> 
<label for=email>Email</label> 


<input class="textfield" 1d="email" name="email"><br> 

<label for=website> 网 址 </label> 

<input class="textfield" 1d="website" value="http://" name="website"><br> 

<]label for=comment 人 > 反馈 </label> 

<textarea class="textarea" 1d="comment" name="comment" rows="15" cols="30"></textarea><br> 
<label for=submit>&nbsp:;</label> 

<input class="submit" id="submit' type="submit" value=" 提 交 " name="submit"> 


</form> 


第 3 步 ， 在 <head> 标 签 内 输入 <style type="text/css">， 定 义 一 个 内 部 样式 表 ， 然 后 在 <style> 标 签 


内 手动 输入 下 面 样式 代码 。 
body {/* 定 义 页 面 属性 */ 
font-size: 12px; /# 定义 字体 大 小 */ 
margin: S0pX: 上 # 定义 边界 ， 避 免 项 部 跑 到 页 面 外 边 */ 
color: #666;: /#* 定义 颜色 */ 
font-family: 宋体 , verdana, arial, helvetica, sans-serif:/* 定义 字体 */ 
} 
#fieldset {/* 定 义 表 单 属性 */ 
border: #fff Opx solid: /# 清除 边框 */ 
width: 300px: /# 定义 表单 域 宽度 */ 
\ background-color: #ccece: /* 定义 浅 灰 色 背 景 */ 
} 
”#6eldset h2 {定义 表单 标题 属性 */ 
: padding: 0.2em; 旋 定义 补 白 ， 增 加 边缘 空隙 */ 
: margin:0; /* 清除 标题 预定 义 边界 */ 
position: relative; /# 相对 定位 */ 
: top: -lem:; /# 在 现 有 流 位 置 则 上 移动 一 个 字体 距离 */ 
: background: url(h2 bg.glfb no-repeat; /# 定义 背景 图 像 ， 圆 角 显 示 */ 
\ width: 194px: /#* 定义 宽度 ， 该 宽度 与 背景 图 像 宽 相 同 */ 
: font-size: 2em: /* 定义 字体 大 小 */ 
: color: #fff: /# 定义 字体 颜色 */ 
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white-space: pre; 
letter-spacing: -1px; 
text-align:center: 
} 
#fieldset label {/* 定 义 表单 标签 属性 */ 
padding: 0.2em: 
margin: 0.4em Opx Opx: 
float: left: 
width: 70px:; 
text-align: right: 
} 
.br {l* 隐 藏 换行 标签 ， 也 不 占据 位 置 */ 
display: none: 
} 
.textfield {/* 定 义 输入 表单 控件 */ 
border: #fff Opx solid; 
padding: 3px 8px:; 
margin: 3pX: 
width: 187px:; 
height: 20px:; 
background: url(textfield bg.glib no-repeat: 
color: #FFOOFF: 
font: 1.lem verdana, arial, helvetica, sans-serif: 
} 
textarea {/* 定 义 文本 域 控件 属性 */ 
border: #fff Opx solld: 
padding:4px 8px; 
margin: 3pX: 
height: 150px:; 
width: 190px: 
background: url(textarea bg.glf no-Tepeat': 
color: #FFOOFF: 
font: 1.1em verdana, arial, helvetica, sans-serif: 
} 
.submit {/* 定 义 按钮 控件 属性 */ 
border: #fff Opx solld: 
margin: 6px: 


width: 80px:; 
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/# 保留 标题 预定 义 格式 ， 可 以 保留 多 行 显示 */ 
/# 收缩 字 距 */ 
/#* 居中 显示 居 会 和 





/# 增加 边 距 空隙 */ 

上 # 增加 顶部 边界 ， 加 大 与 上 一 个 控件 的 间距 */ 
谍 同 左 浮动 */ 

/# 定义 宽度 */ 

bE 


谍 清除 边框 */ 

谍 增加 内 容 边 距 空 际 */ 

谍 定义 边界 距离 */ 

/# 定义 宽 */ 

全 

/# 定义 输入 表单 控件 背景 图 像 */ 
/# 定义 表单 显示 字体 颜色 */ 

/# 定义 字体 属性 */ 


/# 清除 边框 */ 

上 # 增加 内 容 边 距 ， 避 免 内 部 文本 顶 到 边框 */ 
谍 定义 边界 距离 */ 

/# 定义 高 */ 

re 

/# 定义 文本 域 表 单 控件 背景 图 像 */ 

/# 定义 表单 显示 字体 颜色 */ 

/# 定义 字体 属性 */ 


/# 清除 边框 */ 
/# 定义 边界 距离 * 
/# 定义 宽 */ 
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height: 20px: /# 定义 高 */ 
| background: url(submit.gif) no-repeat: /*# 定义 按钮 控件 背景 图 像 */ 
1 text-transform: uppercase: /# 英文 大 写 显 示 */ 
| font: 1.1em verdana, arial, helvetica, sans-serif: /# 定义 字体 属性 */ 
color: #666; /* 定义 字体 颜色 */ 
} 


第 4 步 ， 保 存 文档 ， 按 F12 功能 键 ， 在 浏览 器 中 预览 ， 效 果 如 图 8.12 所 示 。 





图 8.12 设置 表单 背景 样式 


关于 背景 图 像 的 应 用 还 是 比较 灵活 的 ， 用 户 可 以 充分 发 挥 想 象 力 ， 设 计 出 更 具 创 意 的 表单 效果 。 
例如 ， 制 作 动态 表单 ， 先 制作 好 动态 的 GIF 图 像 ， 然 后 引入 即 可 。 


8.2.6 ”设计 高 亮 样 式 


本 例 借助 CSS 的 避 伪 类 选择 占 设 计 在 表单 对 象 获取 焦点 和 失去 焦点 时 ,分 别 为 该 表单 对 象 应 用 
不 同 的 样式 ， 从 而 实现 当前 表单 高 学 显示 效果 ， 如 图 8.13 所 示 。 





Ee lochost 





图 8.13 ”高 亮 提 示 表 单 效果 
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【操作 步骤 
第 1 步 ， 新 建文 要 ， 在 <body> 标 签 中 输入 下 面 代 码 ， 构 建 一 个 表单 结构 ， 该 结构 是 在 上 一 节 示 
例 基 础 上 重新 定义 的 。 


<form 1d="form1" name="forml1" method="post" action=""> 
<fieldset> 
<legend> 和 遍 完 提示 表单 </legend> 
<label for="name" class="title"> 姓 名 : </label> 





<input size="40" name="name" class="inputl"> 
<label for="email" class="title"> 邮 箱 : </label> 
<input size="40" name="email" class="inputl"> 
<label for="url" class="title"> 网 址 : </label> 
<Input size="40" name="url" class="1nputl"> 
<]label for="subject" class="title"> 主 题 : </label> 

<Input size="40" name="subject" class="input]l"> 

<]label for="message" class="title"> 内 容 : </label> 

<textarea name="message" cols="39" rows="5" class="1nputl" ></textarea> 
</fieldset> 


</form> 


第 2 步 ， 在 <head> 标 签 内 插入 <style> 标 签 ， 定 义 内 部 样式 表 。 
第 3 步 ， 定 义 CSS 样式 控制 表单 的 显示 ， 同 时 定义 两 个 类 ， 以 供 JavaScript 属性 事件 调用 ， 代 
人 码 如 下 。 


body {/* 统一 网 页 字体 大 小 */ 


font-size: 12px: /#* 12 像素 字体 大 小 */ 
} 
.title {/* 提示 文本 样式 类 */ 
width:100px: /# 固定 宽度 */ 
float:left: 人 回 左 浮动 定位 */ 
text-align:right: 人/ 文本 右 对 齐 */ 
font-weight:bold: /# 字体 加 粗 */ 
margin:6px 0; 上 # 定义 提示 文本 的 外 边 距 */ 
} 


input, textarea {/* 表单 对 象 默认 显示 样式 */ 
background-color: #EEEEEE; 
border-bottom: #FFFFFF 1px solid; 
border-left: #CCCCCC 1px solld: 
border-right: #FFFFFF 1px solld; 
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border-top: #CCCCCC 1px solld: 

} 

input:focus, textarea:focus {/* 表单 获取 焦点 时 的 样式 */ 
background-color:#F OF 8FF: 
border: 1px solid #999; 


} 


8.2.7 设计 图 标 表 单 


本 例 介 绍 如 何 把 一 个 外 部 图 标 固 定 在 文本 框 的 左 侧 ， 使 其 既 能 点 级 表单 ， 又 能 够 提示 用 户 输入 ， 
演示 效果 如 图 8.14 所 示 。 











图 8.14 图 标 样 式 的 表单 效果 


【操作 步骤 】 
第 1 步 ， 新 建文 档 ， 在 <body> 标 签 中 输入 下 面 代码 ， 构 建 一 个 表单 结构 。 该 结构 依然 保留 上 面 
示例 的 结构 锥 形 ， 并 适当 进行 增删 。 


<div 1d="login"> 
<fieldset> 
<legend> 用 户 登 录 </legend> 
<form action="" method="POST" class="form"> 
<]label for="name"> 姓 名 </label> 
<div><input name="name" type="text" 1d="name" value="" /></div> 
<]label for="password"> 密 人 码 </label> 
<div><input name="password" type="text" 1d="password" value="" /></div> 
<div class="button div"><input type="1mage" src="i1mages/login.gif" /></div> 
</form> 
</fieldset> 
</div> 


第 2 步 ， 在 <head> 标 签 内 插入 <style> 标 签 ， 定 义 内 部 样式 表 。 
第 3 步 ， 输 入 下 面 样式 代码 ， 使 用 CSS 对 这 个 表单 进行 布局 。 


.246 . 





* {l* 清除 所 有 元 素 的 边 距 */ 
margin:0; 
padding:0; 

} 

body {/* 定义 网 页 基本 属性 */ 
text-align:center; 

} 

胡 ogin {/* 表单 包含 框 样式 */ 
margin: 10px auto 10px; 


text-align:left: 

} 

fieldset {/* 表单 域 样式 */ 
WwWldth:230px: 
margin:20px auto: 
font-size: 12px:; 

} 


第 4 步 ， 要 想 让 表单 对 象 的 提示 文本 与 表单 对 象 上 下 排列 显示 ， 需 定义 标签 元 素 为 块 状元 系 ， 
并 定义 它们 的 宽度 为 固定 显示 。 详 细 代 码 如 下 。 


label { /# 定义 标签 提示 文本 的 样式 */ 
width:200px:; 
height:26px; 
line-height:26px:; 
text-1ndent:6px: 
display:block: 
font-weight:bold:; 
} 


第 5 步 ， 定 义 表单 对 象 的 样式 。 先 利用 分 组 统一 所 有 表单 对 象 的 样式 ， 然 后 利用 背景 图 像 的 方 
法 单独 为 每 个 文本 框 左 侧 定 义 一 个 图 标 。 为 了 避免 文本 框 内 的 文本 遮 兰 背景 图 像 图 标 ， 需 要 定义 左 
侧 内 边 距 以 挤 出 一 个 空间 给 背景 图 像 留用 。 详 细 代 码 如 下 。 


#name, #password { /* 统一 表单 对 象 的 样式 */ 
border:1px solid #ccc; 
width: 160px: 
height:22px; 
margin-left:6px; 
padding-left:20px;: 
line-height:20px:; 
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此 清除 内 边 距 */ 
/* 清除 外 边 距 */ 





/#* 网 页 居中 显示 */ 


/# 网 页 居中 显示 */ 
/#* 文本 左 对 齐 */ 


/#* 固定 表单 的 宽度 */ 
/# 定义 表单 的 外 边 距 */ 
/# 统一 表单 的 字体 大 小 */ 


/# 固定 宽度 */ 

/# 固定 高 度 */ 

谍 固定 行 高 */ 

/# 文本 首 行 缩 进 6 像素 */ 
/# 块 状 显示 */ 

谍 加 粗 提示 文本 */ 


/# 定义 表单 对 象 的 边框 样式 */ 

/# 固定 宽度 */ 

/# 固定 高 度 */ 

上 # 定义 左 侧 外 边 距 */ 

上/# 定义 左 侧 内 边 距 ， 挤 出 定义 背景 图 像 的 空间 */ 
上 # 定义 行 高 */ 
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#name { /* 用 户 名 文本 框图 标 样式 */ 
background:url(images/name.gif) no-repeat 2px 2px:; /* 定义 用 户 名 文本 框图 标 */ 
} 
#password { /* 用 户 密码 文本 框图 标 样式 */ 
background:url(images/password.gif) no-repeat 2px 2px; ”/* 定义 密码 文本 框图 标 */ 





} 
.button div { /* 按钮 样式 */ 
text-align:center; 谍 按钮 文本 居中 */ 
margin:6px auto: /# 按钮 居中 显示 */ 
} 


8.2.8 设计 反馈 表 


本 例 设计 一 个 简单 的 反馈 表 ， 主要 使 用 表单 域 <fieldset> 标 签 、 表 单 域 标题 <legend> 标 签 、 文 件 上 
传 控件 input (type="file") 和 文本 域 <textarea> 标 签 。 表 单 域 <fieldset> 标 签 主要 是 将 表单 分 成 多 个 小 
区 域 显 示 在 网 页 中 ; 表单 域 标题 <legend> 标 签 则 是 针对 每 个 不 同 的 表单 域 设 置 标题 ， 文 件 上 传 控件 
input (type="file")〉 结合 后 台 开 发 程序 或 者 JavaScript 实现 文件 上 传 功能 ;， 文本 域 <textarea> 标 签 是 可 
以 输入 多 行文 本 的 元 素 控件 。 

【操作 步骤 

第 1 步 ， 新 建文 档 ， 设 计 表 单 结构 ， 代 码 如 下 ， 在 浏览 器 中 的 显示 效果 如 图 8.15 所 示 。 





<div class="feedback"> 
<h3> 反 馈 表 单 </h3> 
<div class="content"> 
<form method="post" action=""> 
<fieldset class="base Info"> 
<legend> 用 户 信 息 </legend> 
<div class="frm cont userName"><l]abel for="userName"> 用 户 名 : </label><input type="text" 
value="" 1d="userName" /></div> 
<div class="frm cont email"><label for="email"> 电 子 邮 件 : </label><input type="text" 
value="(@" 1d="email" /></div> 
<div class="frm cont url"><label for="url"> 网 址 : </label><input type="text" value="http://" 
1d="url" /></div> 
</fieldset> 
<fieldset class="feedback content"> 
<legend> 反 馈 内 容 </legend> 
<div class="frm cont up file"> 


<]label for="up_file"> 相 关 图 片 : </label><input type="file" id="up file" /> 
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<p class="tips"> 本 系统 只 支持 上 传 jpg、.gif、.png 图 片 。</p> 
</div> 





<div class="frm cont msg"> 
<]label for="msg"> 内 容 : </label><textarea rows="4" cols="40" id="msg"></textarea> 
<p class="tips"> 请 输入 留言 内 容 ! </p> 





</div> 
</fieldset> 
<div class="btns"><button type="submit"> 提 交 </button><button type="reset"> 重 置 </button></div> 
</form> 
</div> 
</div> 


a merocalhosvmysienest him DC en 7 
反馈 表单 


用 户 信息 


用 户 名 : | 
饼 子 邮 什 ，@ 
网 址 ，|http/ 


反馈 内 容 
相关 图 片 : | 浏览.… 


本 系统 只 支持 上 传 jpg、.gif、.png 图 片 。 


| 2 
内 容 ， | 时 


请 输入 留言 内 容 | 





图 8.15 默认 解析 表单 效果 


第 2 步 ， 使 用 CSS 样式 定义 HIML 标签 的 表现 时 ， 基 本 原则 都 是 从 外 到 内 、 从 泛 到 细 ， 更 重要 
的 是 要 善于 利用 CSS 选择 器 ， 代 码 如 下 。 


feedback { /# 定义 表单 整体 的 宽度 和 边框 样式 等 */ 
width:398px:; 
padding: 1px; 
border: 1px solid #E8E8E8: 
background-color:#FFFFFF:; 
} 
.feedback * {/* 定义 表单 内 部 的 所 有 元 素 内 补丁 、 外 补丁 以 及 文字 的 相关 样式 */ 
Imargln:0: 
padding:0; 
font:normal 12px/1.5em "宋体 ", Verdana,Lucida, Arial, Helvetica, sans-serif: 
} 


第 3 步 ， 整 体 样式 的 定义 主要 包含 反馈 表单 的 整体 宽度 和 内 部 所 有 子 元 条 的 整体 定义 。 整 体 宽 
度 、 边 框 等 样式 的 定义 根据 视觉 效果 而 设 定 ; 定义 内 部 所 有 子 元 又 的 样式 是 为 了 提高 后 期 对 子 元 素 
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样式 定义 的 便利 性 ， 代 码 如 下 。 


.feedback h3 { /* 定义 表单 标题 的 高 度 、 文 字样 式 以 及 背景 颜色 等 */ 
height:24px: 
line-height:24px: 
font-weight:bold.; 


font-slze:13PpX: 

text-indent: 12px; 
color:#FFFFFF: 
background-color:#999999; 


} 


第 4 步 ， 定 义 反 馈 表 单 标题 的 高 度 ， 并 设置 标题 文本 缩 进 和 文字 大 小 等 样式 ， 增 强 标题 与 内 容 
之 间 的 反差 和 整齐 感 ， 代 码 如 下 。 

.feedback .content {/* 表单 内 容 区 域 增 加 10px 的 左右 内 补丁 ， 使 其 与 表单 外 框 产 生 间距 */ 

padding:0 10px; 

} 

第 5 步 ， 为 了 不 让 反馈 表单 内 部 信息 与 边框 太 紧 密 ， 将 表单 内 容 区 域 增加 10px 的 左右 内 补丁 ， 
使 其 与 表单 整体 有 一 定 的 间距 ， 代 码 如 下 。 

.feedback fieldset {/* 定义 表单 域 边框 样式 以 及 与 上 下 几 个 元 素 之 间 的 间距 */ 


padding-left:12px: /# 因为 前 面 已 经 将 表单 内 部 所 有 内 补丁 设置 为 0， 所 以 增加 12px 的 
左 内 补丁 使 表单 域 标题 缩 进 */ 


margin-top:10px;: 
border:0 none: /*# 去 除 默认 的 表单 域 边框 */ 
border-top:1px solid #999999; ” /* 定义 表单 域 上 边框 的 样式 */ 
} 
.feedback legend { 
padding:0 Spx: /# 设置 表单 域 的 标题 在 表单 域 上 边框 中 的 间距 */ 
color:#333333: /* 考虑 正 浏览 器 解析 表单 域 标题 时 文字 颜色 与 Firefox 浏览 器 不 
同 ， 所 以 统一 定义 相同 的 颜色 值 */ 
} 


表单 域 在 浏览 器 默认 解析 的 情况 下 是 有 边框 线 的 ， 不 需要 边框 线 就 需要 将 其 隐藏 ， 需 要 部 分 边 
框 线 就 要 将 不 需要 的 部 分 隐藏 。 只 需要 一 条 上 边框 线 ， 因 此 首先 将 所 有 边框 消除 (border:0 none; )， 
然后 再 次 定义 上 边框 的 样式 。 

第 6 步 ， 在 定义 整体 样式 时 ， 将 所 有 内 补丁 (padding) 定义 为 0， 导 致 表单 域 标题 <legend> 标 签 
中 的 文字 紧 挨 表 单 域 边框 。 需 要 将 其 缩 进 就 要 增加 左 内 补丁 值 。 例 如 ，padding-left:12px: 即 可 将 表单 
域 标题 缩 进 ， 使 表单 域 标题 占据 在 表单 域 上 边框 线 之 间 ， 如 图 8.16 所 示 为 两 者 对 比 。 


| 
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表单 域 缩 进 








与 否 导 臻 的 
表单 域 标题 
位 置 的 差别 


图 8.16 表单 域 缩 进 前 后 对 表单 域 标题 的 影响 对 比 
设置 代码 如 下 。 


.feedback .frm cont { 
margin-top:8px; /* 表单 内 容 区 域 中 不 同 表单 之 间 的 上 下 间距 */ 
} 


第 7 步 ， 将 每 个 表单 的 内 容 增加 上 外 补丁 ， 增 加 每 个 表单 元 系 之 间 的 空间 感 ， 代 码 如 下 。 


.feedback label { /* 定义 label 标签 的 宽度 、 右 对 齐 ， 设 置 浮动 ， 使 其 与 输入 框 并 列 */ 
float:left: 
width:80px:; 
height:22px;: 
line-height:24px:; 
text-align:right:; 
color:#ABABAB:; 
cursor:pointer:; 


} 


第 8 步 ，<label> 标 签 使 用 浮动 后 可 以 将 旁边 的 元 素 〈 即 文本 输入 框 )“ 吸 ”到 它 的 旁边 ， 并 设置 
了 宽度 和 高 度 属性 ， 再 将 文字 右 对 齐 。 这 样 的 排列 效果 在 视觉 效果 上 可 以 达到 整齐 的 感觉 ， 不 会 让 
浏览 者 感觉 这 个 表单 是 杂乱 无 章 的 ， 代 人 码 如 下 。 


feedback .base_ info input { /* 定义 表单 内 容 区 域 中 所 有 输入 框 的 宽度 和 高 度 等 样式 */ 


width:100px: 
height:17px; 
padding:3px 2px 0; 
border: 1px solid #DEDEDE:; 
} 
.feedback .email input { /* 针对 Email 地 址 输入 框 ， 改 变 其 宽度 属性 值 */ 
width:150px:; 
} 


sl 
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.feedback .url input { /* 针对 网 址 输入 框 ， 改 变 其 宽度 属性 值 */ 
width:240px; 
} 
上/# 避免 修改 文件 上 传 浏览 框 因 输入 框 的 高 度 和 宽度 修改 导致 浏览 器 之 间 的 差别 ， 使 用 auto 默认 值 恢 复 浏 
览 器 默认 解析 */ 
feedback .up file Input { 
width:auto: 
height:auto; 
} 


.feedback .base info input 选择 器 为 反馈 表单 中 类 名 为 base_info 的 容器 内 所 有 的 <input> 标 签 设 置 
了 宽度 、 高 度 和 边框 样式 ， 再 针对 不 同 功能 的 输入 框 设 置 宽 度 ， 不 仅 能 加 大 显示 输入 数据 的 空间 ， 
还 可 以 形成 表单 之 间 有 序 的 错落 感 。 

第 9 步 ， 文 件 上 传 控件 input (type='"file") 也 是 <input> 标 答 ， 但 不 在 类 名 为 base info 的 容器 之 
内 ， 所 以 最 终 显示 的 还 是 默认 的 浏览 器 解析 效果 ， 代 码 如 下 。 


.feedback .tips { /* 将 提示 文本 利用 内 补丁 缩 进 ， 并 设置 红色 ， 突 出 显示 */ 
padding:Spx 0 0 80px; 
color:#FF3260; 

} 

feedback textarea {/* 定义 文本 域 的 宽 高 和 内 部 文字 的 行 高 等 样式 */ 
WwWldth:240px: 
height:66px;: 
padding-left:2px: 
line-height:22px; 
border: 1px solid #DEDEDE:; 

} 

-feedback .btns { /# 按钮 区 域 增加 上 下 内 补丁 ， 加 大 间距 ， 并 定义 其 内 部 的 元 素 居 中 显示 */ 
padding:Spx 0: 
text-align:center; 

} 

-feedback .btns button { /* 定义 按钮 和 按钮 中 文字 的 间距 等 样式 */ 
height:22px;: 
margin:0 Spx; 
letter-spacing:3px; /* 调整 文字 间距 */ 
padding-left:3px; /* 添加 左 内 补丁 使 按钮 左右 间距 相等 */ 
cursor:pointer; 


} 
第 10 步 ， 为 文本 域 、 提 示 信 息 和 按钮 等 元 素 定 义 相 关 样 式 。 文 本 域 中 使 用 padding-left:2px: 是 需 
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要 使 文字 与 其 边框 产生 间距 ; 按钮 中 定义 letter-spacing:3px: 可 以 让 按钮 中 的 文字 之 间 有 3px 的 间距 ， 
以 文字 的 右边 为 基准 。 
第 11 步 ， 将 经 过 以 上 CSS 修饰 的 HIML 结构 在 浏览 器 中 预览 ， 页 面 效 果 如 图 8.17 所 示 。 





本 | 
EECEEE 





od : jhttp:77 


: E22 
本 系统 只 支持 上 传 - jpg、- EiE、- png 图 片 。 


请 输入 留言 内 容 : 


提交 | | 重要 





图 8.17 最 终 的 反馈 表单 效果 
8.2.9 设计 搜索 表单 


搜索 框 一 般 包 含 关 键 词 输入 框 、 搜 索 类 别 、 搜 索 提 示 和 搜索 按钮 ， 当 然 简单 的 搜索 框 只 
有 关键 词 输入 框 和 搜索 按钮 两 部 分 。 本 案例 将 介绍 如 何 设 计 附 融 提 示 的 搜索 框 样式 ， 演 示 效 果 
如 图 8.18 所 示 。 





























图 8.18 ”设计 搜索 框 


【操作 步骤 】 
第 1 步 , 新 建 一 个 网 页 , 保存 为 Index.html, 在 <body> 标 签 内 输入 如 下 结构 代码 , 构建 表单 结构 。 


<div class="search box"> 
<h3> 搜 索 框 </h3> 


<div class="content"> 


a 
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<form method="post" action=""> 
<select> 
<option value="1"> 网 页 </option> 
<option value="2"> 图 片 </option> 
<option value="3"> 新 闻 </option> 





<option value="4">MP3</option> 
</select> 
<input type="text" value="css" /> <button type="submit"> 搜 索 </button> 
<div class="search tips"> 
<h4> 搜 索 提 示 </h4> 
<ul> 
<]i><a hre 仁 "#">css 视频 </a><span> 共 有 589 个 项 目 </span></li> 
<]i><a hre 传 "#">css 教程 </a><span> 共 有 58393 个 项 目 </span></li> 
<]i><a hre 传 "#">css+div</a><span> 共 有 158393 个 项 目 </span></li> 
<]i><a hre 伍 "#">css 网 页 设计 </a><span> 共 有 58393 个 项 目 </span></li> 
<]i><a hre 传 "#">css 样式 </a><span> 共 有 158393 个 项 目 </span></li> 
</ul> 
</div> 
</form> 
</div> 
</div> 


整个 表单 结构 分 为 两 个 部 分 ， 将 下 拉 选 择 、 文 本 框 和 按钮 归 为 一 类 ， 主 要 功能 是 搜索 信息 ; 搜 
索 提 示 为 当 在 文本 框 中 输入 文字 时 ， 将 会 出 现 相 对 应 的 搜索 提示 信息 ， 该 功能 主要 是 由 后 台 程 序 开 
发 人 员 实 现 ， 前 台 设 计 师 只 需要 将 其 以 页 面 元 素 表 现 即 可 。 

第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 逐步 输入 
CSS 代码 ， 设 计 表 单 样式 。 

第 3 步 ， 通 过 分 析 最 终 效 果 可 以 看 到 ， 页 和 面 中 并 没有 显示 “站 内 搜索 ”和 “搜索 提示 ”这 两 个 
标题 ， 且 搜索 按钮 是 以 图 片 代替 的 ， 搜 索 提示 出 现在 搜索 输入 框 的 底部 ， 并 且 宽 度 与 输入 框 相等 。 
为 此 ， 在 内 部 样式 表 中 输入 下 面 样 式 ， 对 表单 结构 进行 初始 化 设计 。 


.Search box {/* 设置 输入 框 宽 度 ， 并 设置 为 相对 定位 ， 成 为 其 子 级 元 素 的 定位 参考 */ 
position:relative; 
width:360px; 

} 

.search box* {/* 设置 输入 框 内 补丁 、 边 界 为 0， 列表 修饰 为 无 ， 并 且 设 置 字体 样式 等 */ 
margin:0; padding:0; 
list-style:none; 
font:normal 12px/1.5em "宋体 ", Verdana,Lucida, Arial, Helvetica, sans-serif; 

} 

.search box h3, .search tips h4 {display:none; } /* 隐藏 标题 文字 */ 


“254。 


第 8 章 使 用 CSS 美 化 表单 





第 4 步 ， 设 置 搜索 框 整体 的 宽度 属性 值 以 及 其 所 有 子 元 素 的 内 补丁 、 边 界 等 相关 属性 。 为 了 方便 
将 搜索 提示 信息 框 通过 定位 的 方式 显示 在 搜索 输入 框 的 底部 , 需 在 .search_box 中 定义 position 属性 , 让 
其 成 为 子 级 元 素 定位 的 参照 物 。 文 档 结 构 中 的 标题 在 页 面 中 不 需要 显示 ， 因 此 可 以 将 其 隐藏 。 在 后 期 。 做 
网 站 开发 过 程 中 如 果 需 要 显示 , 可 以 直接 通过 CSS 样式 修改 , 而 不 需要 再 次 调整 文档 结构 ,代码 如 下 。 ， 





.search_box select {/* 将 下 拉 框 设置 浮动 ， 并 设置 其 宽度 值 */ 
float:left: 
width:60px:; 
} 
.search_box input {/* 设置 搜索 输入 框 样式 ， 浮 动 显 示 ， 添 加 左右 两 边 间距 〈 边 界 ) */ 
float:left: 
width:196px: height: ] 4px: 
padding: 1px 2px; margin:0 Spx; 
border: 1px solid #619FCF: 
} 
.Search box button {/* 设置 按钮 浮动 ， 以 缩 进 方式 隐藏 按钮 文字 ， 添 加 背景 图 */ 
float:left: 
width:S9px; height: ] 8px:; 
text-indent:-9999px; 
border:0 none: 
background:url(1mages/btn search.gif) no-repeat 0 0: 
cursor:pointer; 


} 


第 5 步 ， 搜 索 类 别 下 拉 框 、 搜 索 关 键 字 输入 框 和 搜索 按钮 这 3 个 元 素 按照 单 理 来 理解 原本 就 是 
可 以 并 列 显示 的 ， 但 为 了 将 这 3 个 元 素 之 间 的 默认 空间 缩短 ， 可 使 用 float:left: 来 实现 。 再 利用 输入 
框 input 增加 可 控 的 边界 margin:0 Spx: 调整 三 者 之 间 的 间距 。 

三 者 之 间 整 体 样式 调整 完毕 后 ， 再 对 其 细节 部 分 进行 详细 的 调整 修饰 。 美 化 输入 框 并 且 利 用 文 
字 缩 进 属性 隐藏 按钮 上 的 文字 ， 使 用 图 片 代 蔡 。 

第 6 步 ， 下 拉 框 <select> 标 签 只 是 设置 了 宽度 属性 值 ， 并 未 设置 其 高 度 属性 值 ， 其 原因 就 是 正 
浏览 器 和 Firefox 浏览 器 对 其 高 度 属性 值 的 解析 完全 不 一 样 ， 因 此 采用 默认 的 方式 而 不 是 再 次 利用 
CSS 样式 定义 其 相关 属性 。 

第 7 步 ， 按 钮 <button> 标 签 在 默认 情况 下 不 具备 当 光 标 悬 停 时 显示 手 型 ， 因 此 需要 特殊 定义 ， 代 
码 如 下 。 


.search tips {/* 将 搜索 提示 框 的 宽度 设置 为 与 输入 框 相 同 ， 并 绝对 定位 在 输入 框 底部 */ 
position:absolute:; 
top:17px: left:6Spx; 
width:190px; padding:Spx Spx 0; 
border: 1px solid #619FCF: 


Se 
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第 8 步 ， 搜 索 提 示 框 使 用 绝对 定位 的 方式 显示 在 输入 框 的 底部 ， 其 宽度 属性 值 等 于 输入 框 的 宽 
度 属 性 值 ， 可 以 提高 视觉 效果 。 不 设置 提示 框 的 高 度 属性 值 是 希望 搜索 框 能 随 者 内 容 的 增加 而 目 适 
应 高 度 ， 代 码 如 下 。 


.Search tips li {/* 设置 搜索 提示 框 内 的 列表 高 度 和 高 度 值 ， 利 用 浮动 避免 正 浏览 器 中 列表 上 下 间距 增多 的 
bug*/ 
float:left: 
width: 100%: 
height:22px; 
line-height:22px; 
} 
第 9 步 , 在 正 早 期 版 本 浏览 嚣 中， 列表 <] 这 标签 上 下 间距 会 增 大 显示 ， 为 了 避免 该 问题 的 出 现 ， 
将 所 有 列表 <] 谊 标签 添加 浮动 float 属性 。 宽 度 属性 值 设置 为 100% 可 以 避免 当 列 表 <li> 标 俭 具 有 浮动 
属性 时 ， 宽 度 自 适应 的 问题 ， 代 码 如 下 。 


.search tips lia { /* 搜索 提示 中 相关 文字 居 左 显示 ， 并 设置 相关 样式 */ 


float:left: 
text-decoration:none:; 
color:#333333; 

} 

.Search ftips li ahover { /* 搜索 提示 中 相关 文字 在 光标 悬 停 时 显示 红色 文字 */ 
color:#FF0000: 

} 

.search tips li span {/* 以 灰色 弱化 搜索 提示 相关 数据 ， 并 居 右 显示 */ 
float:right; 
color:#CCCCCC: 

} 


第 10 步 ， 将 列表 项 <li> 标 俭 中 的 销 点 <a> 标 答 和 <span> 标 签 分 别 左 右 浮 动 ,使 它们 靠 两 边 显 示 在 
搜索 提示 框 内 ， 并 相应 地 添加 文字 样式 ， 做 细节 上 的 调整 。 


83 在 线 练 习 


1. 练习 表单 结构 设计 和 基本 行为 的 控制 。 
2. 练习 使 用 CSS3 设计 各 种 网 页 表单 特效 。 
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使 用 DIV+CSS 设计 网 页 


在 标准 化 设计 中 ， 网 页 内 容 主 要 通过 HTML 标签 组 织 显示 ， 然 后 使 用 CSS 设计 版 式 。 
本 章 将 围绕 HTML 结构 和 CSS 布局 相关 概念 、 思 路 和 方法 等 基础 知识 进行 讲解 ， 并 通过 大 
量 案 例 训练 读者 使 用 CSS 进行 网 页 布局 。 


【 学 习 要 点 】 

能 金正 确 设 计 文 档 结 构 。 

了 解 CSS 盒 模 型 。 

设计 边框 样式 。 

设计 边界 和 补 白 样式 。 

使 用 CSS 浮动 和 定位 技术 排版 页 面 内 容 。 


部 苇 苇 于 于 
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9.1 设计 文档 结构 


搭建 良好 的 网 页 结构 是 CSS 布局 的 基础 ， 如 果 HTML 文档 结构 混乱 ， 那 么 很 多 事情 做 起 来 都 是 
很 腑 烦 的。 结构 简洁 、 富 有 语义 的 结构 会 让 后 期 排版 更 加 轻松 。 


9.1.1 定义 文档 结构 


一 个 完整 的 HIML 文档 必须 包含 3 个 部 分 : 一 个 用 <html> 标 签 定 义 的 文档 容器 ， 一 个 用 <head> 
定义 各 项 声明 的 文档 头 部 和 一 个 由 <body> 定 义 的 文档 主体 部 分 。<head> 作 为 各 种 声明 信息 的 包含 杠 ， 
出 现在 文档 的 头 部 ， 并 且 要 先 于 <body> 出 现 。 而 <body> 用 来 显示 文档 主体 内 容 。 

在 HIML 文档 的 头 部 区 域 ， 一 般 需 要 包括 网 页 标题 、 基 础 信息 和 元 信息 等 。HTML 的 头 部 元 系 
以 <head> 为 开始 标记 ， 以 </head> 为 结束 标记 。 

<head> 的 作用 范围 是 整 篇 文档 ， 其 中 可 以 有 <meta> 元 信息 定义 、 文 档 样 式 表 定义 和 脚本 等 信息 ， 
定义 在 HTML 文档 头 部 的 内 容 往往 不 会 在 网 页 上 直接 显示 。 

网 页 的 主体 部 分 包括 要 在 浏览 器 中 显示 处 理 的 所 有 信息 。 在 网 页 的 主体 标记 中 有 很 多 属性 设置 ， 
包括 网 页 的 背景 设置 、 文 字 属 性 设置 和 链接 设置 等 。 

【示例 】 本 示例 是 一 个 很 简单 的 HTML 文件 ， 使 用 了 尽量 少 的 HIML 标签 。 它 演示 了 一 个 简单 
的 文档 应 该 包含 的 内 容 ， 以 及 body 内 容 是 如 何在 浏览 器 中 显示 的 。 

第 1 步 ， 新 建文 本 文件 ， 输 入 下 面 的 代码 。 


<html> 
<head> 
<meta charset="utf-8"> 
<title> 一 个 简单 的 文档 包含 内 容 </title> 
</head> 
<body> 
<h1> 我 的 第 一 个 网 页 文档 </h1> 
<p>HTML 文档 必须 包含 三 个 部 分 : </p> 





1 | 
<li>html 一 一 网 页 包含 框 </li> 
<li>head 头 部 区 域 </li> 
<li>body 一 一 主体 内 容 </li> 
</ul> 
</body> 


</html> 


第 2 步 ， 保 存 文本 文件 ， 命 名 为 test， 设 置 扩 展 名 为 .html。 
第 3 步 ， 使 用 浏览 右 打 开 这 个 文件 ， 则 可 以 看 到 如 图 9.1 所 示 的 预览 效果 。 


se 







我 的 第 一 个 网 页 文档 


HTML 文 档 必 须 包含 三 个 部 分 : 


”html 一 网 页 包含 框 
<li> 和 定义 的 信息 


。head- 一 头 部 区 域 
内 
图 9.1 网 页 文档 演示 效果 













<body> 包 含 框 


< 作 注意 : HTML 包含 丰富 的 语义 元 素 ， 正 确 选用 它们 可 以 避免 代码 宛 余 。 在 制作 网 页 时 不 仅 需 要 
使 用 <div> 标 签 来 构建 网 页 结构 ， 还 要 使 用 下 面 几 类 标签 完善 网 页 结构 。 

<hl>、<h2>、<h3>、<h4>、<h5>、<h6>: 定义 文档 标题 ，1 表示 一 级 标题 ，6 表示 六 级 标 

题 ， 常 用 标题 包括 一 级 、 二 级 和 三 级 。 

<p>: 定义 段落 文本 。 

<ul>、<ol>、<l> 等 : 定义 信息 列表 、 导 航 列 表 、 榜 单 结构 等 。 

<table>、<tr>、<td> 等 : 定义 表格 结构 。 

<form>、<input>、<textarea> 等 : 定义 表单 结构 。 

<span>: 定义 行内 包含 框 。 


四 


四 加 加 加 多 


为 了 更 好 地 选用 标签 ， 读 者 可 以 参考 w3school 网 站 的 http:/www.w3school.com.cn/tags/index.asp 
页 面 信息 。 其 中 ，DTD 列 描述 标签 在 哪 一 种 DOCTYPE 文档 类 型 是 允许 使 用 的 : S=Strict， 


T=Transitional, F=Frameset。 


9.1.2 使 用 div 和 span 


文档 结构 基本 构成 元 素 是 div，div 表示 区 块 〈division) 的 意思 ， 它 提供 了 将 文档 分 割 为 有 意义 的 
区 域 的 方法 。 通过 将 主要 内 容 区 域 包 围 在 div 中 并 分 配 id 或 class, 就 可 以 在 文档 中 添加 有 意义 的 结构 。 

【示例 1】 应 该 避免 不 必要 的 能 套 。 例 如 , 如 果 设 计 导 航 列 表 , 就 没有 必要 将 <ul> 再 包 庄 一 层 <div> 
标签 ， 代 码 如 下 。 





<div 1d="nav"> 
<ul> 
<]i><a hre 伍 "#"> 首 页 </a></li> 
<]i><a hre 伍 "#"> 关 于 </a></li> 
<]li><a hze 伍 "#"> 联 系 </a></li> 
</ul> 
</div> 


可 以 完全 删除 div， 直 接 在 ul 上 设置 4， 代码 如 下 。 
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<ul 1d= "nav"> 
<]li><a hre 传 "##f"> 首 页 </a></ 外 > 
<]i><a hre 伍 #"> 关 于 </a></li> 
<]i><a hze 伍 "#"> 联 系 </a></li> 
</ul> 


过 度 使 用 div 是 结构 不 合理 的 一 种 表现 ， 也 容易 造成 结构 复杂 化 。 
与 div 不 同 ，span 元 条 可 以 用 来 对 行内 元 系 进行 分 组 。 
【示例 2】 下 面 的 代码 可 将 段落 文本 中 的 部 分 信息 进行 分 隔 显示 ， 以 使 应 用 不 同 的 类 样式 。 


<h1> 新 闻 标 题 </h1> 
<p> 新 闻 内 容 </p> 


<p> 发 布 于 <span class="date">2016 年 12 月 </span>， 由 <span class="author"> 张 三 </span> 编 辑 </p> 


对 行内 元 素 进 行 分 组 的 情况 比较 少 ， 所 以 使 用 span 的 频率 没有 div 多 。 一 般 应 用 类 样式 时 才 会 
用 到 。 


9.1.3 使 用 id 和 class 


HTML 是 简单 的 文档 标识 语言 ， 而 不 是 界面 语言 。 文 档 结构 大 部 分 使 用 <div> 标 签 来 完成 ， 为 
了 能 够 识别 不 同 的 结构 , 一般 通过 定义 id 或 class 给 它们 赋予 额外 的 语义 , 给 CSS 样式 提供 有 效 的 
【示例 1】 构 建 一 个 简单 的 列表 结构 ， 并 给 它 分 配 一 个 这 ， 自 定义 导航 模块 。 


<ul 1d="nav"> 
<]i><a hre 伍 #"> 首 页 </a></li> 
<]i><a hre 伍 #"> 关 于 </a></li> 
<]i><a hze 伍 "#"> 联 系 </a></li> 
</ul> 


使 用 id 标识 页 面 上 的 元 素 时 ，id 名 必须 是 唯一 的 。id 可 以 用 来 标识 持久 的 结构 性 元 素 ， 如 主导 
航 或 内 容 区 域 ， 还 可 以 用 来 标识 一 次 性 元 素 ， 如 茶 个 链接 或 表单 元 素 。 

在 整个 网 站 上 ，id 名 应 该 应 用 于 语义 相似 的 元 素 以 避免 混 消 。 例 如 ， 如 果 联 系 人 表单 和 联系 人 
详细 信息 在 不 同 的 页 面 上 上， 那么 可 以 给 它们 分 配 同样 的 id 名 contact， 但 是 如 果 在 外 部 样式 表 中 给 
它们 定义 样式 ， 就 会 遇 到 问题 ， 因 此 使 用 不 同 的 id 名 (如 contact form 和 contact details) 就 会 简 
单 得 多 。 

与 id 不 同 ， 同 一 个 class 可 以 应 用 于 页 面 上 任意 数量 的 元 素 ， 因 此 class 非常 适合 标识 样式 相同 
的 对 象 。 例 如 ， 设 计 一 个 新 闻 页 面 ， 其 中 包含 每 条 新 闻 的 日 期 。 此 时 不 必 给 每 个 日 期 分 配 不 同 的 id， 
而 是 可 以 给 所 有 日 期 分 配 类 名 date。 
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全 提示 : id 和 class 的 名 称 一 定 要 保持 语义 性 ， 并 与 表现 方式 无 关 。 例 如 ， 可 以 给 导航 元 素 分 配 
id 名 为 right nav， 因 为 希望 它 出 现在 右边 。 但 是 ， 如 果 以 后 将 它 的 位 置 改 到 左边 ， 那 
么 CSS 和 HTML 就 会 发 生 歧义 。 所 以 , 将 这 个 元 素 命名 为 sub nav 或 nav main 更 合 z 7 
适 。 这 种 名 称 解释 就 不 再 涉及 如 何 表现 它 。 对 于 class 名 称 也 是 如 此 。 例 如 ， 如 果 定 义 | 
所 有 错误 消息 以 红色 显示 , 不 要 使 用 类 名 red, 而 应 该 选择 更 有 意义 的 名 称 , 如 error 或 
feedback。 





< 人 注意 : class 和 id 名 称 需要 区 分 大 小 写 ， 虽 然 CSS 不 区 分 大 小 写 ， 但 是 在 标签 中 是 否 区 分 大 小 
写 取决 于 HTML 文档 类 型 。 如 果 使 用 XHTML 严谨 型 文档 ， 那 么 class 和 id 名 是 区 分 大 
小 写 的 。 最 好 的 方式 是 保持 一 致 的 命名 约定 ， 如 果 在 HTML 中 使 用 驼峰 命名 法 ， 那 么 在 
CSS 中 也 采用 这 种 形式 。 


【示例 2】 在 实际 设计 中 ，class 被 广泛 使 用 ， 这 就 容易 产生 小 用 现象 。 例 如 ， 很 多 初学 者 在 所 有 
的 元 素 上 添加 类 ， 以 便 更 方便 地 控制 它们 。 这 种 现象 被 称 为 “多 类 症 ”， 在 茶 种 程度 上 ， 这 和 使 用 
基于 表格 的 布局 一 样 粳 糙 ， 因 为 它 在 文档 中 添加 了 无 意义 的 代码 。 


<hl class="newsHead"> 标 题 新 闻 </h1> 
<p class="newsText"> 新 闻 内 容 </p> 


<p class="newsText"><a href—"news.php" class="newsLink"> 更 多 </a></p> 


【示例 3】 在 示例 2 中 ， 每 个 元 素 都 使 用 一 个 与 新 闻 相 关 的 类 名 进行 标识 。 这 使 新 闻 标 题 和 正文 
可 以 采用 与 页 面 其 他 部 分 不 同 的 样式 。 但 是 ， 不 需要 用 这 么 多 类 来 区 分 每 个 元 素 ， 可 以 将 新 闻 条 目 
放 在 一 个 包含 框 中 ， 并 加 上 类 名 news， 从 而 标识 整个 新 闻 条 目 。 然 后 ， 可 以 使 用 包含 框 选择 器 识别 
新 闻 标 题 或 文本 ， 代 码 如 下 。 


<div class="news"> 
<hl> 标 题 新 闻 </h1> 
<p> 新 闻 内 容 </p> 


<p><a hre 伟 "news.php"> 更 多 </a></p> 
</div> 


以 这 种 方式 删除 不 必要 的 类 有 助 于 简化 代码 ， 使 页 面 更 简洁 。 过 度 依赖 类 名 是 不 必要 的 ， 我 们 
只 需要 在 不 适合 使 用 id 的 情况 下 对 元 素 应 用 类 ， 而 且 尽 可 能 少 使 用 类 。 实 际 上 ,创建 大 多 数 文 档 常 
各 只 需要 添加 几 个 类 。 如 果 初 学 者 发 现 目 己 添加 了 许多 类 ， 那 么 这 很 可 能 意味 着 目 己 创建 的 HTML 
文档 结构 有 问题 。 


9.1.4 设置 文档 类 型 
在 网 页 文档 的 第 一 行 代 码 中 ， 一 般 都 要 使 用 <doctype> 标 签 定 义 文档 的 类 型 ， 示 例如 下 。 
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回 ”定义 HIMLS 类 型 文档 
<!doctype html> 


加” 定义 XHTML 1.0 过 渡 型 文档 





<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/ 
xhtmll-transitional.dtd"> 


加 ”定义 HTML 4.01 严谨 型 文档 
<!DOCTYPE HTML PUBLIC "-WW3CWDTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 


网 页 文档 类 型 众多 ,主要 根据 HTML 版 本 号 细 分 ,常用 类 型 包括 HTML 4.01、XHTML 1.0、HTMLS 
和 XHTML Mobile 1.0， 其 中 HTML 4.01 和 XHTML 1.0 又 分 为 过 渡 型 和 严谨 型 两 种 。 

浏览 器 根据 <doctype> 标 签 是 否 存 在 和 设置 的 DID 来 选择 要 使 用 的 表现 方法 。 如 果 XHTML 文 
档 包含 形式 完整 的 DOCTYPE， 那 么 它 一 般 以 标准 模式 表现 。 


全 提示 : DTD (文档 类 型 定义 ) 是 一 组 机 器 可 读 的 规则 ， 它 们 定义 XML 或 HTML 的 特定 版 本 中 
允许 有 什么 ， 不 允许 有 什么 。 在 解析 网 页 时 ,浏览 器 将 使 用 这 些 规则 检查 页 面 的 有 效 性 ， 
并 且 采 取 相 应 的 措施 。 浏 览 器 通过 分 析 页 面 的 DOCTYPE 声明 来 了 解 要 使 用 哪个 DTD， 
因此 知道 要 使 用 HTML 的 哪个 版 本 。 


9.1.5 认识 显示 模式 


浏览 右 为 了 实现 对 标准 网 页 和 传统 网 页 的 兼容 ， 分 别 制订 了 几 套 网 页 显示 方案 ， 这 些 方案 就 是 
浏览 右 的 显示 模式 。 浏 览 右 能 够 根据 网 页 文档 类 型 来 决定 选择 哪 套 显示 模式 对 网 页 进行 解析 。 
名 ”下 浏览 占 文 持 两 种 显示 模式 标准 模式 和 怪异 模式 。 在 标准 模式 中 ， 浏 览 占 会 根据 W3C 
制定 的 标准 来 显示 页 面 ， 而 在 怪异 模式 中 ， 将 以 正 5 显示 页 面 的 方式 来 呈现 网 页 ， 以 保证 
与 过 去 非 标准 网 页 的 兼容 。 
四 Firefox 支持 3 种 显示 模式 : 标准 横 式 、 几 乎 标准 的 模式 和 怪异 模式 。 其 中 几乎 标准 的 模式 
对 应 于 I 下 和 Opera 的 标准 模式 ， 该 模式 除了 在 处 理 表格 的 方式 方面 有 一 些 细微 差异 外 ,与 





标准 模式 基本 相同 。 
四 ”Opera 支持 与 下 相同 的 显示 模式 。 但 是 在 Opera 9 版 本 中 ， 怪 异 模式 不 再 兼容 卫 5 盒 模 型 
解析 方式 。 


【示例 】 为 了 理解 标准 模式 和 怪异 模式 ， 本 示例 比较 了 浏览 占 显 示 模 式 的 工作 方式 。 
第 1 步 ， 新 建文 档 ， 完 整地 输入 下 面 的 网 页 代码 。 


<!DOCTYPE HIML PUBLIC "-/W3C/DTD HIML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/ 
REC-html401-19991224/loose.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
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第 2 步 ， 新 建文 档 ， 完 整地 输入 下 面 的 网 页 代码 。 





第 3 步 ， 保 存 文档 ， 在 正 浏 览 器 中 预 物 上 面 创建 的 两 个 文档 ， 效 果 如 图 9.2 和 图 9.3 所 示 。 


ab 





CE S ho/ocahoswm psc 认 大 六 


怪 
异 
显 
示 
盒 
模 
型 





图 9.2 标准 模式 显示 效果 图 9.3 怪异 模式 显示 效果 
可 以 看 到 ， 当 网 页 的 文档 类 型 被 声明 为 HIML 4.01 过 渡 型 时 ， 网 页 将 按 标 准 模 式 显 示 ， 页 面 显 
示 的 盒 模型 将 遵循 W3C 制定 的 标准 进行 解析 。 


< 所 注意 : 对 于 HIML 1.01 文档 ， 包 含 严格 DTD 的 DOCTYPE 常常 导致 页 面 以 标准 模式 解析 ， 包 
含 过 渡 DID 和 URI 的 DOCTYPE 也 导致 页 面 以 标准 模式 解析 。 但 是 有 过 渡 DTD 而 没 
有 URI 会 导致 页 面 以 怪异 模式 表现 。DOCTYPE 不 存在 或 形式 不 正确 会 导致 HTML 和 
XHTML 文档 以 怪异 模式 表现 。 例 如 ， 定 义 下 面 几 种 文档 类 型 ，IE 浏览 器 会 以 怪异 模式 
显示 网 页 。 


回 没有 提供 文档 类 型 的 版 本 


<IDOCTYPE HIML PUBLIC "-/W3C//DTD HIML//EN" "http://www.w3.org/TR/html/loose.dtd"> 


回 ”HTML 2.0 版 本 


<IDOCTYPE HIML PUBLIC "-//IETF//DTD HIML 2.0/EN"> 


回 ”HTML 3.0 版 本 


<IDOCTYPE HIML PUBLIC "-//IETF//DTD HIML 3.0/EN//"> 


回 HTML 3.2 版 本 


<IDOCTYPE HIML PUBLIC "-/W3C//DTD HIML 3.2 Fimnal//EN"> 


9.2 CSS 布局 基础 


学 习 CSS 布局 ， 应 该 先 了 解 CSS 盒 模型 ， 本 节 将 介绍 CSS 盒 模型 相关 的 构成 要 系 和 应 用 技巧 。 
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9.2.1 CSS 盒 模 型 结构 


在 网 页 设计 中 ， 常 会 听 到 这 些 名 词 概 仿 : 内 容 (content)、 填 充 〈 补 白 ， 内 边 距 ，padding)、 边 
框 (border)、 边 界外 边 距 ，margin)。 日 党 生活 中 的 盒子 就 是 能 装 东 西 的 一 种 箱子 ， 也 具有 这 些 属 
性 ， 所 以 把 这 些 名 词 抽象 为 盒子 模型 概 仿 。 它 具有 如 下 特性 。 

名 ”每 个 盒子 部 有 边界 、 边 杠 、 填 充 和 内 容 4 个 属性 。 

四 每 个 属性 都 包括 上 、 右 、 下 、 左 4 个 部 分 。 属 性 的 4 个 部 分 可 同时 设置 ， 也 可 分 别 设置 。 

内 容 (content) 就 是 盒子 里 装 的 东西 ， 而 填充 (padding) 就 是 怕 盒 子 里 装 的 东西 损坏 而 填 加 的 
泡沫 或 者 其 他 抗震 辅料 ， 边 框 (border) 就 是 盒子 本 身 了 ， 至 于 边界 (margin)， 则 说 明 盒子 摆 放 的 
时 候 不 能 全 部 堆 在 一 起 ， 要 留 一 定 空 际 保 持 通 风 ， 同 时 也 为 了 方便 取出 。 

在 网 页 中 ， 内 容 常 指 文 字 、 图 片 等 信息 或 元 素 ， 也 可 以 是 小 盒子 ( 髓 套 结 构 )， 与 现实 生活 中 盒 
子 不 同 的 是 ， 现 实生 活 中 的 东西 一 般 不 能 大 于 盒子 ， 否 则 盒子 会 被 撑 坏 ， 而 CSS 盒子 具有 弹性 ， 里 
面 的 东西 大 过 盒子 最 多 把 盒子 撑 大 ， 不 会 损坏 盒子 。 网 页 元 素 与 盒子 之 间 的 关系 如 图 9.4 所 示 。 








OX{ 

width:200px:; 
height:200px: 
border:solid SOpx red:; 
padding:50px: 


margin:S50px; 


} 
图 9.4 CSS 元 素 与 盒子 结构 关系 示意 图 


网 页 中 任何 元 素 都 可 以 视 为 一 个 盒子 ， 所 有 盒 模型 就 是 页 面 元 素 的 基本 模型 结构 。 从 外 到 里 ， 
盒 模型 包括 边界 、 边 框 、 补 白 和 内 容 4 大 区 域 ， 结 构 示 意图 如 图 9.5 所 示 。 
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图 9.5 盒 模型 中 各 个 属性 的 空间 位 置 关 系 
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9.2.2 盒子 大 小 


CSS 盒子 模型 使 用 width 〈 宽 ) 和 height (高 ) 定义 内 容 区 域 的 大 小 。 
【示例 】 本 示例 定义 两 个 并 列 显 示 的 div 元 素 ， 设 置 每 个 width 为 S0%， 显 示 效 果 如 图 9.6 所 示 。 





<style type="text/css"> 

div {/* 定 义 div 元 素 公共 属性 */ 
float: left; 诺 同 左 浮动 ， 实 现 并 列 显 示 */ 
text-align: center: /# 定义 div 内 的 字体 居中 显示 */ 
height: 240px: /# 定义 高 度 */ 

} 

#left { background-color:rgba(0,0,255,0.3); width: 50%:} 

#right {background-color:rgba(255,0,0,0.3); width: $0%:;} 

</style> 


<div id="left"> 左 栏 </div> 
<div id="Tight"> 右 栏 </div> 


‘ee (+)- | 人 @ http://localhost:8080/mysite/te ~ RC 








图 9.6 定义 元 素 的 大 小 
安 提示 : 内 容 区 域 包括 宽度 (width ) 、 高 度 (height ) 和 背景 (background ) ， 实 际 上 背景 能 够 延 
伸 到 补 白 区 域 ， 有 些 浏 览 器 中 背景 图 像 其 至 延伸 到 边框 内 。 所 以 对 于 一 个 CSS 盒 模型 来 
说 ， 它 的 实际 宽度 或 高 度 就 等 于 内 容 区 域 的 宽 ( width ) 和 高 (height ) 加 上 二 倍 的 边界 、 
边框 和 补 白 之 和 。 
W=width (content) +2*(border + padding + margin) 
H= height (content) + 2 * (border + padding + margin) 
在 下 怪异 解析 模式 下 (其 他 部 分 浏览 器 也 支持 怪异 模式 ,如 Firefox 和 Opera 等 )，CSS 的 width 
属性 表示 内 容 区 域 、 补 白 和 边框 宽度 之 和 ， 而 height 属性 表示 内 容 区 域 、 补 白 和 边框 高 度 之 和 ， 所 
以 盒 模型 的 实际 大 小 就 为 : 


“200” 
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W = width + 2 * margin 
H= height+2 * margin 
用 户 也 可 以 通过 下 面 4 个 属性 灵活 控制 CSS 盒 模型 的 大 小 , 这 些 属 性 在 网 页 弹性 布局 中 非常 有 用 。 
回 “min-width: 设置 对 象 的 最 小 宽度 。 
名 ”max-width: 设置 对 象 的 最 大 宽度 。 
加 ”min-height: 设置 对 象 的 最 小 高 度 。 
加 ”max-height: 设置 对 象 的 最 大 高 度 。 


9.2.3 盒子 边框 

边框 样式 由 CSS 的 border 属性 负责 定义 ，border 包括 3 个 子 属性 : border-style (边框 样式 )、 
border-color (边框 颜色 ) 和 border-width (边框 宽度 )。 

1. 定义 宽度 


定义 边框 的 宽度 有 多 种 方法 ， 简 单 说 明 如 下 。 
方法 1， 直 接 在 属性 后 和 面 指定 宽度 值 ， 代 码 如 下 。 








<style type="text/css"> 


border-bottom-width:12px: 上 # 定 义 元 素 的 底 边 框 宽度 为 12px*/ 
border-top-width:0.2em:; 上 # 定 义 顶 部 边框 宽度 为 元 素 内 字体 大 小 的 0.2 倍 */ 
</style> 


方法 2， 使 用 关键 字 ， 如 thin、medium 和 thick。thick 比 medium 宽 ， 而 medium 比 thin 宽 。 不 
同 浏览 器 对 此 解析 的 宽度 值 也 不 同 ， 有 的 解析 为 Spx、3px、2px， 有 的 解析 为 3px、2px、1px。 

方法 3, 单独 为 元 素 的 某 条 边 设 置 宽度 , 可 以 使 用 border-top-width (项 边框 宽度 ) .border-right-width 
(右边 框 宽度 )、border- bottom-width《〈 底 边框 宽度 ) 和 border-left-width 〈 左 边框 宽度 )。 

方法 4， 使 用 border-width 属性 快速 定义 边框 宽度 ， 例 如 : 


<style type="text/css"> 


border-width:2px:; 上 # 定 义 四 边 都 为 2px*/ 

border-width:2px 4px: /# 定 义 上 下 边 为 2px， 左 右边 为 4px*/ 

border-width:2px 4px 6px: /# 定 义 上 边 为 2px， 左 右边 为 4px， 底 边 为 6px*/ 
border-width:2px 4px 6px 8px; ”定义 上 边 为 2px， 右 边 为 4px， 底 边 为 6px， 左 边 为 8px*/ 
</style> 


写 提示 : 当 定义 边框 宽度 时 ， 必 须要 定义 边框 的 显示 样式 。 由 于 边框 默认 样式 为 none， 即 不 显示 ， 
所 以 仅 设置 边框 的 宽度 ， 由 于 样式 不 存在 ， 边 框 宽度 也 自动 被 清除 为 0。 


2. 定义 样式 
边框 样式 是 边框 显示 的 基础 ，CSS2 提供 了 下 面 几 种 边框 样式 。 
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none: 默认 值 ， 无 边框 ， 不 受 任 何 指定 的 border-width 值 影响 。 


hidden: 隐藏 边框 ，IE 不 支持 。 


dotted: 定 义 边框 为 点 线 o 


dashed: 定义 边框 为 虚线 。 


solid: 定义 边框 为 实 线 。 


double: 定义 边框 为 双 线 边框 ， 两 条 线 及 其 间隔 宽度 之 和 等 于 指定 的 border-width 值 。 
groove: 根据 border-color 值 定义 3D 四 槽 。 

ridge: 根据 border-color 值 定义 3D 上 同 槽 。 

inset: 根据 border-color 值 定义 3D 四边 。 

outset: 根据 border-color 值 定 义 3D 同 边 。 

【示例 】 本 示例 使 用 border 设计 列表 框 样式 ， 定 义 列表 项 显示 下 划 线 ， 效 果 如 图 9.7 所 示 。 


<style type="text/css"> 
#box {/*< 定 义 信 纸 的 外 框 >*/ 


} 


width: S00px: 

height: 400px:; 

padding: 8px 24px: 
margin: 6px:; 
border-style: outset: 
border-width: 4px: 
border-color: #aaa: 
font-size: 14px; 

color: #D02090: 
list-style-position: Inslde; 


#box h2 {/*< 定 义 标 题 格 式 >*/ 


} 


padding-bottom: 12px: 
border-bottom-style: double; 
border-bottom-width: 6px; 
border-bottom-color: #999; 
text-align: center; 


color: #000000; 


#box li{ 


padding: 6px 0; 
border-bottom-style: dotted: 
border-bottom-width: 1px; 


border-bottom-color: #66CC66: 


/# 定义 信纸 边框 为 3D 凸 边 效果 */ 
/# 定义 信纸 边框 宽度 */ 
此 定义 信纸 边框 颜色 */ 


上 # 定义 列表 符号 在 内 部 显示 */ 


/* 定义 标题 底 边 框 为 双 线 显示 */ 
/* 定义 标题 底 边 框 宽 度 */ 
/#* 定义 标题 底 边 框 颜色 */ 


/# 增加 列表 项 之 间 的 间距 */ 
上 # 定义 列表 项 底 边 框 为 点 线 显 示 */ 
/# 定义 列表 项 底 边框 宽度 */ 
/# 定义 列表 项 底 边 框 颜色 */ 


i 
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} 
</style> 
<ol 1d="box"> 
<h2> 边 框 样式 应 用 </h2> 
<li>none: 默认 值 ， 无 边框 ， 不 受 任何 指定 的 border-width 值 影响 。</li> 
<li>hidden: 隐藏 边框 ， 正 不 支持 。</li> 
<li>dotted: 定义 点 线 。</l> 
<li>dashed: 定义 虚线 。</li> 
<li>solid: 定义 实 线 。</i> 
<li>double: 定义 双 线 边 框 ， 两 条 线 及 其 间隔 宽 等 于 指定 的 border-width 值 。</li> 
<li>groove: 根据 border-color 值 定 义 D 凹 槽 。</> 
<li>ridge: 根据 border-color 值 定义 D 凸 模 。</li> 
<li>inset: 根据 border-color 值 定义 DD 四 边 。</li> 
<]li>outset: 根据 border-color 值 定义 DD 同 边 。</li> 
</ol> 


h alhos...site/test html 
lS http://localhost/mysite/te PD ~ BO | Elocalhost ee we 


有 中 localhost/mysite/test.html 豆 Co ES E34 





边框 样式 应 用 


边框 样式 应 用 


1。、 none: 图 让 值 , 元 边框 ,不 受 任何 指定 的 border-wid 了 h 信 景 各 向 。 
1. none : 默认 值 ， 无 边框 ,不 营 任 何 指定 和 父 border-width 信 和 彩 响 . 
2. hidden : 隆 茂 边框 ， 正 不 支持 。 


3. dotted : 走 义 点 线 ， 


2. hidden: 隐藏 边框 , 正 不 支持 。 
.” dotted: 定义 点 线 。 
dashed: 定义 虚线 。 

5 solid: 定义 立 线 。 4. dashed : 定义 虐 线 。 


3. Solld : 定义 实 续 。 


groove: 根据 border-color 入 证 光 DD 冉 棋 。 


6. double : 定义 双 线 边框 ， 两 条 线 及 其 加 隔 守 等 于 指定 的 border-width 值 。 
ridge: 根据 border-color 值 定义 D 凸 槽 。 
inset; 根据 border-color 值 定义 D 思 边 。 

10，。 outset: 根据 border -color 值 定义 Dw 边 。 


7. groove : 根 锯 border-color 值 定义 D 四 林 . 


| 
4 
5 
6. doublc ; 定居 双 线 边框 ， 两 条 结 及 其 问 了 天 帘 等 于 指定 的 bordcr-width 值 。 
了 
8 
9 


8. ridge : 根据 border-color 值 定义 D 睛 覃 。 
9. inset : 根 铬 border-color 值 定义 D 四 边 , 


10. outset : 根据 border-color 值 定义 D 睛 边 。 





IE 预览 效果 Firefox 预览 效果 
图 9.7 边框 样式 比较 


在 卫 和 Firefox 浏览 器 中 分 别 进行 预览 ， 则 效果 存在 细微 区 别 ， 说 明 不 同 浏览 器 在 解析 相同 的 
样式 代码 时 显示 效果 也 不 完全 相同 。 


写 ' 提 示 : 在 默认 状态 下 ,边框 的 宽度 为 medium ( 中 型 ) ， 这 是 一 个 相对 宽度 ， 一 般 为 2~3 像素 。 
边框 默认 样式 为 none， 即 隐藏 边框 显示 。 边 框 默认 颜色 为 前 景色 ， 即 元 素 中 包含 文本 的 
颜色 ， 如 果 没有 文字 ， 则 将 继承 上 级 元 素 所 包含 的 文本 颜色 。 


9.2.4 盒子 边 青 
元 素 的 边 距 由 CSS 的 margin 属性 控制 ，margin 定义 了 元 素 与 其 他 相 邻 元 素 的 距离 。 由 margin 
属性 又 派生 出 4 个 子 属 性 : margin-top〈 顶 部 边界 )、margin-right 〈 右 侧 边界 )、margin-bottom 〈 底 部 


0 
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边界 》 和 margin-lef 《〈 左 侧 边界 )， 这 些 属性 控制 元 素 在 不 同方 位 上 与 其 他 元 素 的 间距 。 
。 【示例 】 在 本 示例 中 ， 设 置 4 个 盒子 的 外 边界 变化 ， 通 过 不 同方 向 上 外 边界 的 设置 ， 设 计 出 一 个 
。 梯 状 效果 ， 如 图 9.8 所 示 。 通 过 本 例 演示 ， 用 户 能 够 体验 到 边界 可 以 自由 设置 ， 且 各 边 边界 不 会 相互 


vote 人 


<style type="text/css"> 
div { /* <div> 标 签 的 默认 样式 */ 


height: 20px: /#* 统一 高 度 */ 
border: solid 1px red: /#* 统一 边框 样式 *#/ 
} 
jbox4 {/* 第 4 个 盒子 样式 */ 
margin-top: 2px; /# 顶部 边界 大 小 */ 
margin-right: lem: /# 右 侧 边界 大 小 */ 
margin-left: lem: 诺 左 侧 边 界 大 小 */ 
} 
#box3 {margin-top: 4px: margin-right: 4em: margin-left: 4em:} /* 第 3 个 盒子 样式 */ 
#box2 {margin-top: 8px: margin-right: 8em: margin-left: 8em:} 2 
#box!l] {margin-top: 16px: margin-right: 12em: margin-left: 12em:;} /六 第 1 个 盒子 样式 */ 
</style> 


<div 1d="box1"></div> 
<div 1d="box2"></div> 
<div 1d="box3"></div> 
<div 1d="box4"></div> 


去 - 全 @ http://localhost/mysite/test.html Prac 大 全 于 楼 型 

















图 9.8” 盒 模 型 不 同方 向 上 边界 的 设置 效果 
窑 提示 : 为 了 提高 代码 编写 效率 ，CSS 提供 了 边界 定义 的 简写 方式 。 具 体 说 明 如 下 。 
@ 如 果 4 个 边界 相同 ， 则 直接 使 用 margin 属性 定义 ， 为 margin 设置 一 个 值 即 可 。 
@ 如果 4 个 边界 不 相同 ， 则 可 以 在 margin 属性 中 定义 4 个 值 ，4 个 值 用 空格 进行 分 隔 ， 
代表 边 的 顺序 是 顶部 、 右 侧 、 底 部 和 左 侧 ， 即 从 顶部 开始 按 顺 时 针 方 向 进行 设置 。 代 
码 如 下 。 


margint:top right bottom left; 


.2 
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这 样 就 能 够 加 速 代码 输 入 速度 。 例 如 ， 针 对 上 面 示例 中 的 样式 可 以 简写 成 如 下 样式 。 
#box4 { margin:lpx lem auto lem: } 
#box3 { margin:4px 4em auto 4em.; } 
#box2 { margin:8px 8em auto 8em.; } 





#boxl] { margin:12px 12em auto l2em:; } 


如 果菜 个 边 没有 定义 大 小 ， 则 可 以 使 用 auto (自动 ) 关键 宁 进 行 代 替 ， 但 是 必须 设置 一 个 值 ， 
否则 会 产生 歧义 。 
@ 如 果 上 下 边界 不 同 ， 左 右边 界 相 同 ， 则 可 以 使 用 3 个 值 进 行 代替 ， 因 此 可 以 简写 成 如 下 样式 。 


margint:top right bottom:; 


例如 ， 针 对 上 面 的 示例 代码 ， 可 以 继续 简写 成 如 下 样式 。 


#box4 { margin:1px lem auto; } 
#box3 { margin:4px 4em auto; } 
#box2 { margin:8px 8em auto; } 
#boxl] { margin:12px 12em auto; } 


因为 左右 边界 相同 ， 所 以 就 不 用 再 考虑 ， 合 并 在 一 起 即 可 。 

@ 如 果 上 下 边界 相同 ， 左 右边 界 相 同 ， 则 直接 使 用 两 个 值 进 行 代替 : 第 1 个 值 表示 上 下 边界 ， 
第 2 个 值 表示 左右 边界 。 例 如 ， 下 面 样式 定义 了 段落 文本 的 上 下 边界 为 12 像素 ， 而 左右 边 
界 为 24 像素 。 


p{ margin:12px 24px:} 


< 作 注意 : margin 可 以 取 负 值 , 这 样 就 能 够 强迫 元 素 偏 移 原来 位 置 ， 实 现 相对 定位 功能 , 利用 margin 
功能 ， 可 以 设计 复杂 的 页 面 布 局 效果 。 


9.2.5 盒子 补 白 


补 白 用 来 调整 元 素 包含 的 内 容 与 元 素 边 框 的 距离 ， 由 CSS 的 padding 属性 负责 定义 。 从 功能 
讲 ， 补 白 不 会 影响 元 素 的 大 小 ， 但 是 由 于 在 布局 中 补 白 同样 占据 空间 ， 所 以 在 布局 时 应 考虑 补 白 对 
于 布局 的 影响 。 如 果 在 没有 明确 定义 元 素 的 宽度 和 高 度 的 情况 下 ， 使 用 补 白 来 调整 元 素 内 容 的 显示 
位 置 要 比 边界 更 加 安全 、 可 靠 。 

padding 与 margin 属性 一 样 ， 也 包括 4 个 子 属 性 : padding-top、padding-right、padding-bottom 和 
padding-left， 这 些 子 属性 分 别 定义 4 边 的 补 白 大 小 。 例 如 : 


padding:2px;/# 定 义 元 素 四 周 补 白 为 2px*/ 

padding:2px 4px;/* 定 义 上 下 补 白 为 2px， 左 右 补 白 为 4px*/ 

padding:2px 4px 6px:/# 定 义 上 补 白 为 2px， 左 右 补 白 为 4px， 下 补 白 为 6px*/ 

padding:2px 4px 6px 8px; /# 定 义 上 补 白 为 2px， 右 补 白 为 4px， 下 补 白 为 6px， 左 补 白 为 8px*/ 





i 
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与 边界 不 同 ， 补 白 取 值 不 可 以 为 负 。 
后 ， 才 能 感觉 到 补 白 的 存在 。 
【示例 】 本 示例 设计 的 是 导航 列表 项 水 平 显示 ， 通 过 补 白 调整 列表 项 的 大 小 ， 如 图 9.9 所 示 。 


补 白 和 边界 一 样 都 是 透明 的 ， 当 设置 元 素 的 背景 色 或 边框 





9.9 正 下 预览 效果 
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< 外 注意 : 补 白 与 边界 、 边 框 一 样 都 是 可 选 的 ， 并 不 是 每 个 元 素 都 必须 全 部 设置 ， 如 果 不 设 置 这 些 


属性 , CSS 默认 其 值 为 0。 但 是 很 多 元 素 已 经 被 浏览 器 预定 了 特定 样式 , 如 body、p、hl ~ 
h6、ul 等 ， 这 些 预定 义 样 式 主 要 包括 补 白 和 边界 的 属性 设置 。 当 然 ， 也 可 以 重 置 margin 
和 padding 为 0， 清除 其 中 的 预定 义 样式 。 为 了 快速 开发 ， 可 以 在 页 面 设计 之 初 ， 用 通 配 
选择 符 清除 所 有 元 素 的 补 白 和 边界 样式 ， 代 码 如 下 


* {/*[ 清 除 所 有 元 素 的 预定 义 样 式 ]*/ 


} 


9.2.6 


margin:0; /* 清 除 边界 值 */ 
padding:0; /* 清 除 补 白 值 */ 


认识 显示 类 型 


在 CSS 中 ， 可 以 使 用 display 属性 来 改变 元 素 的 显示 类 型 。 在 CSS 2.1 中 ，display 属性 共有 18 
个 选项 值 ， 详 细 说 明 如 下 。 


四 
四 


的 鸭 且 多 的 多 多 押 的 多 的 生 的 的 的 


block: 块 状 显 示 ， 在 元 素 后 和 面 添加 换行 符 ， 也 就 是 说 其 他 元 素 不 能 在 其 后 面 并 列 显 示 。 
none: 隐藏 显示 ， 这 与 Vvisibility:hidden; 声 明 不 同 ，display:none; 声 明 不 会 为 被 隐藏 的 元 素 保 
留 位 置 。 

inline: 行内 显示 ， 在 元 素 后 面 删除 换行 符 ， 多 个 元 素 可 以 在 一 行内 并 列 显 示 。 
inline-block: 行内 显示 ， 以 块 状 显示 ， 其 他 行内 元 素 可 以 同行 显示 。 

compact: 紧凑 的 块 状 显示 或 基于 内 容 之 上 的 行内 显示 。 

marker: 在 容器 对 象 之 前 或 之 后 显示 ， 该 属性 值 必须 与 :after 和 :before 伪 元 素 一 起 使 用 。 
inline-table: 具有 行内 特征 的 表格 显示 。 

list-item: 具有 块 状 特征 的 列表 项 目 显示 ， 并 可 以 添加 可 选项 目标 志 。 

run-in: 块 状 显示 或 基于 内 容 之 上 的 行内 显示 。 

table: 具有 块 状 特征 的 表格 显示 。 

table-caption: 表格 标题 显示 。 

table-cell: 表格 单元 格 显示 。 

table-column: 表格 列 显示 。 

table-column-group: 表格 列 组 显示 。 

table-header-group: 表格 标题 组 显示 。 

table-footer-group : 表格 页 脚 组 显示 。 

table-row: 表格 行 显示 。 

table-row-group: 表格 行 组 显示 。 


CSS3 新 增 了 box 显示 类 型 ， 关 于 该 技术 话题 请 参阅 下 一 章 内 容 。 

在 常规 网 页 设计 中 ，CSS 把 标签 分 为 两 种 基本 显示 形态 : Block ( 块 状 ) 和 Inline 〈 行 内)。 块 状 
元 素 的 宽度 一 般 为 100%， 占 据 一 行 ， 即 使 宽度 不 为 100%， 块 状元 素 也 始终 占据 一 行 。 常 用 块 状元 
素 如 表 9.1 所 示 。 
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块 状 元 素 
address 
blockquote 
div 
dl 
fieldset 
form 
hl-h6 
hr 
noframes 
noscript 


ol 


legend 
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表 9.1 符合 标准 的 常用 块 状元 素 
说 明 
表示 特定 信息 ， 如 地 址 、 签 名 、 人 作者、 文档 信息 。 一 般 显示 为 斜体 效果 
表示 文本 中 的 一 段 引 用 语 。 一 般 为 缩 进 显示 
表示 通用 定位 包含 框 ， 没 有 明确 的 语义 
表示 定义 列表 
表示 字段 集 ， 显 示 为 一 个 方 枉 ， 用 来 包含 文本 和 其 他 元 素 
说 明 所 包含 的 控件 是 某 个 表单 的 组 成 部 分 
表示 标题 ， 其 中 hl 表示 一 级 标题 ， 字 号 最 大 ，h6 表示 最 小 级 别 标题 ， 字 号 最 小 
画 一 条 横 线 
包含 对 于 那些 不 支持 FrameSet 元 素 的 浏览 器 使 用 的 HIML 
指定 在 不 文 持 脚本 的 浏览 器 中 显示 的 HTML 
编制 有 序列 表 
表示 一 个 段落 
以 固定 宽度 字体 显示 文本 ， 保 留 代 码 中 的 空格 和 回 车 符 
表示 将 所 含 内 容 组 织 成 含有 行 和 列 的 表格 形式 
表示 不 排序 的 项 目 列表 
表示 列表 中 的 一 个 项 目 
在 FieldSet 元 素 绘制 的 方 框 内 插入 一 个 标题 


行内 元 素 没有 固定 的 大 小 ， 定 义 它 的 width 和 height 属性 无 效 。 行 内 元 素 可 以 在 行内 自由 流动 ， 
但 可 以 定义 边界 、 补 白 、 边 杠 和 背景 ， 它 显示 的 高 度 和 宽度 只 能 够 根据 所 包含 内 容 的 高 度 和 宽度 来 
确定 。 第 用 行内 元 素 如 表 9.2 所 示 。 


abbr 


acIODYIDI 


表 9.2 符合 标准 的 常用 行内 元 素 


说 明 
表示 超 链 接 
标注 内 部 文本 为 缩写 ， 用 title 属性 标示 缩写 的 全 称 ， 在 非 正 浏览 嚣 中 会 以 下 点 划 线 显示 ， 
IE 不 支持 
表示 取 首 字母 的 缩写 词 ， 一 般 显 示 为 粗 体 ， 部 分 浏览 器 支持 
指定 文本 以 粗 体 显 示 


用 于 控制 包含 文本 的 阅读 顺序 ， 如 <bdo dir='"rtl">this fragment is in english</bdo>， 浏览 器 会 
从 右 到 左 显示 文本 

指定 所 含 文本 要 以 比 当前 字体 稍 大 的 字体 显示 

插入 一 个 换行 符 

指定 一 个 容器 ， 可 以 包含 文本 ， 显 示 为 一 个 按钮 

表示 引文 ， 以 和 斜体 显示 

表示 代码 范例 ， 以 等 宽 字 体 显示 


.274 。 
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续 表 
行内 元 素 说 明 
df 表示 术语 ， 以 斜体 显示 
em 表示 强调 文本 ， 以 矢 体 显示 
i 指定 文本 以 斜体 显示 
img 插入 图 像 或 视频 片断 
mput 创建 各 种 表单 输入 控件 
kbd 以 定 宽 字体 显示 文本 
label 为 页 面 上 的 其 他 元 素 指定 标签 
map 包含 客户 端 图 像 映 射 的 坐标 数据 
object 插入 对 象 
q 分 离 文本 中 的 引 语 
samp 表示 代码 范例 
script 指定 由 脚本 引擎 解释 的 页 面 中 的 脚本 
Select 表示 一 个 列表 框 或 者 一 个 下 拉 框 
small 指定 内 含 文本 要 以 比 当前 字体 稍 小 的 字体 显示 
span 指定 内 骸 文 本 容器 
strike 带 删除 线 显 示 文 本 
Strong， 以 粗 体 显示 文本 
sub 说 明 内 含 文 本 要 以 下 标的 形式 显示 ， 比 当前 字体 稍 小 
sup 说 明 内 含 文本 要 以 上 标的 形式 显示 ， 比 当前 字体 稍 小 
textarea 多 行文 本 输入 控件 
tt, 以 固定 宽度 字体 显示 文本 
Var 定义 程序 变量 ， 通 常 以 斜体 显示 


93 浮动 布局 
浮动 布局 不 同 于 流动 模式 , 它 能 够 让 对 象 脱离 HTML 结构 , 在 包含 框 内 向 左 侧 或 右 侧 浮动 显示 ， 
但 是 浮动 元 素 不 能 脱离 文档 流 ， 它 依然 受 文档 流 的 影响 。 
9.3.1 定义 浮动 显示 


在 默认 情况 下 , 任何 元 素 都 不 具有 浮动 特性 , 可 以 使 用 CSS 的 float 属性 定义 元 素 同 左 或 同 右 浮 
动 ， 基 本 用 法 如 下 。 





float: none | left |right 


其 中 ，none 表示 消除 浮动 ，left 表示 元 素 同 左 浮动 ，right 表示 元 素 同 右 浮动 ， 默 认 值 为 none。 


ee 





| 
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浮动 布局 模型 具有 下 面 几 个 特征 。 
第 一 ， 浮 动 元 素 以 块 状 显 示 ， 可 以 定义 width 和 height 属性 。 
【示例 1】 本 示例 为 两 个 span 元 素 定 义 高 和 宽 属 性 ， 然 后 让 其 中 一 个 span 元 素 浮动 显示 ， 从 而 


比较 它们 的 显示 效果 ， 如 图 9.10 所 示 。 


<style type="text/css"> 

span {/* 定 义 行内 元 素 span 的 显示 属性 */ 

width:400px: /# 定 义 宽 为 400 像素 */ 

height:200px: /* 定 义 高 为 200 像素 */ 

border:solid red lpx; 

} 
#inline img {width:100px: } /# 定 义 行内 元 素 内 的 图 片 宽 为 100 像素 */ 
#float {float:right:} /# 为 第 2 个 行内 元 素 span 定义 浮动 显示 */ 
</style> 


<span id="inline"> 行 内 元 素 流动 显示 

<img src="images/1.jpg" alt=" 流 动 的 图 片 " /> 
</span> 
<span id"float"> 行 内 元 素 浮动 显示 </span> 


G ooohosim P ~ Bo 
rr” 


内 元 素 流 动 明示 _ 
| 元素 浮 动 显示 








行内 元 素 浮动 显示 1 行内 元 素 浮动 显示 2 
9.10 浮动 显示 与 流动 显示 比较 


通过 图 9.10 可 以 看 到 当 第 2 个 span 元 素 被 定义 为 浮动 之 后 , 该 元 素 自 动 以 块 状 显 示 , 因此 为 span 


元 素 定义 的 高 和 宽 属 性 值 有 效 。 而 第 1 个 元 素 由 于 是 行内 元 素 且 没有 浮动 显示 ， 所 以 定义 的 宽 和 高 
无 效 ， 所 看 到 的 红色 边框 仅 包 里 在 行内 元 素 的 外 边 。 


浮动 元 素 应 该 明确 定义 大 小 。 如 果 浮 动 元 素 没 有 定义 宽度 和 高 度 ， 它 会 目 动 收缩 到 仅 能 包 住 内 


容 为 止 。 例 如 ， 如 果 浮 动 元 素 内 部 包含 一 张 图 片 ， 则 浮动 元 素 将 与 图 片 一 样 宽 ， 如 果 是 包含 的 文本 ， 
则 浮动 元 素 将 与 最 长 文本 行 一 样 宽 。 而 当 块 状元 素 没 有 定义 宽度 时 ， 则 会 自动 显示 为 100%。 


第 二 ， 浮 动 元 素 与 流动 元 素 可 以 混合 使 用 ， 不 会 重 登 ， 都 遵循 先 上 后 下 的 显示 规则 ， 都 受到 文 


档 流 影响 。 但 浮动 元 素 能 够 改变 相 邻 元 素 的 显示 位 置 ， 可 以 同 左 或 网 右 并 列 显示 。 


与 普通 元 素 一 样 ， 浮 动 元 素 始终 位 于 包含 元 素 内 ， 不 会 脱离 包含 框 ， 这 与 定位 元 素 不 同 。 


ee 
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【示例 2】 本 示例 以 示例 1 为 基础 , 添加 一 个 包含 框 , 可 以 看 到 第 2 个 span 元 素 靠 近 包 含 元 素 div 
的 右边 框 浮动 ， 而 不 再 是 body 元 素 的 右边 框 ， 如 图 9.11 所 示 。 
<div 1d="contain"> 
<span id="inline"> 行 内 元 素 流动 显示 
<img src="images/1.jpg" alt=" 流 动 的 图 片 " /> 





</span> 
<span jd="float"> 行 内 元 素 浮动 显示 </span> 
</div> 


ee ES http://ccalhost/mysite/testt.html 








ee 


行内 元 素 流 动 明示 Wh 


皇 内 元 系 浮 动 吕 示 


























图 9.11 浮动 元 素 始终 位 于 包含 元 素 


第 三 ， 浮 动 元 素 仅 能 改变 水 平 显示 方式 ， 不 能 改变 垂直 显示 方式 ， 并 且 依 然 受 文档 流 影响 。 流 
动 元 系 总 会 以 流动 的 形式 环绕 浮动 元 素 左 右 显 示 。 

浮动 元 素 不 会 强迫 前 面 的 流动 元 素 坏 绕 其 周围 流动 ， 而 总 是 在 上 邻 流动 元 素 的 下 一 行 浮动 显示 。 
浮动 元 素 不 会 覆盖 其 他 元 素 ， 也 不 会 挤占 其 他 元 素 的 位 置 。 

第 四 ， 浮 动 元 素 可 以 并 列 显示 ， 如 果 包 含 框 宽 度 不 够 ， 则 会 错 行 显示 。 

【示例 3】 本 示例 模拟 设计 了 3 个 并 列 显示 的 栏目 ， 通 过 float 定义 左 、 中 、 右 3 栏 并 列 显示 。 代 
码 如 下 ， 效 果 如 图 9.12 所 示 。 


<style type= "text/css"> 
body {padding: 0; margin: 0: text-align: center:} 
#main {/* 定 义 网 页 包含 框 样式 */ 

width: 400px: 

margin: auto: 

padding: 4px:; 

line-height: 160px:; 

color: #fff: 

font-slze: 20px; 

border: solid 2px red: 


rd 
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#main div {float: left:height: 160px:} /# 定 义 3 个 并 列 栏 目 同 左 浮动 显示 */ 
#left {width: 100px:background: red:} * 定 义 左 侧 栏 目 样 式 */ 

#middle {width: 200px:background: blue;:} ”/* 定 义 中 间 栏 目 样式 */ 

#right {width: 100px: background: green:} ”/* 定 义 右 侧 栏目 样式 */ 

.Clear { clear: both;: } 

</style> 





<div 1d="main"> 
<div id="left"> 左 侧 栏目 </div> 
<div id="middle"> 中 间 栏 目 </div> 
<div id='"right"> 右 侧 栏目 </div> 
<br class="clear" /> 


</div> 


x 
人 al ES http://localhost/mysite ” @ localhost . 丽 人 台 让 


右 侧 栏目 





图 9.12 并 列 浮动 显示 


浮动 布局 可 以 设计 多 栏 并 列 显示 效 果 ， 但 也 容易 错 行 ， 如 果 浏 览 器 窗口 发 生变 化 或 者 浮动 包含 
框 不 固定 ， 则 会 出 现 错 行 浮动 显示 问题 ， 导 致 破坏 并 列 布局 效果 。 


9.3.2 ”清除 浮动 


使 用 CSS 的 clear 属性 可 以 清除 浮动 , 定义 与 浮动 相 邻 的 元 素 在 必要 的 情况 下 换行 显示 ， 这 样 可 
以 控制 浮动 元 素 挤 在 一 行内 显示 。clear 属性 取 值 包括 以 下 4 个 。 

MM ”left: 清除 左边 的 浮动 元 素 ， 如 果 左 边 存 在 浮动 元 素 ， 则 当前 元 素 会 换行 显示 。 

四 right: 清除 右边 的 浮动 元 素 ， 如 果 右 边 存在 浮动 元 素 ， 则 当前 元 素 会 换行 显示 。 

加 “both: 清除 左右 两 边 的 浮动 元 素 ， 不 管 哪 边 存在 浮动 对 象 ， 则 当前 元 素 都 会 换行 显示 。 

四 “none: 默认 值 ， 人 允许 两 边 都 可 以 存在 浮动 元 素 ， 当 前 元 素 不 会 主动 换行 显示 。 

【示例 】 本 示例 设计 一 个 3 行 3 列 的 页 面 结构 ， 定 义 中 间 3 栏 浮动 显示 。 代 码 如 下 ， 显 示 效 果 





如 图 9.13 所 示 。 
<style type="text/css"> 
dv { 
border: solid 1px red: /# 增加 边框 ， 以 方便 观察 */ 
height: 5Opx: /# 固定 高 度 ， 以 方便 比较 */ 


ue 
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} 
#left, #middle, #right { 
float: left: /# 定义 中 间 3 栏 同 左 浮动 */ | 
width: 33%;: /# 定义 中 间 3 栏 等 宽 *#/ 
</style> 


<div id="header"> 头 部 信息 </div> 
<div id="left"> 左 栏 信息 </div> 
<div id="middle"> 中 栏 信 息 </div> 
<div id="right"> 右 栏 信息 </div> 
<div id="footer"> 脚 部 信息 </div> 


但 是 如 果 设 置 左 栏 高 上 度 大 于 中 栏 和 右 栏 高 度 ， 则 发 现 脚 部 信息 栏 上 移 并 环绕 在 左 栏 右 侧 ， 代 码 
如 下 ， 显 示 效 果 如 图 9.14 所 示 。 


#left {height:100px: } 上 # 定义 左 栏 高 出 中 栏 和 右 栏 */ 


CE hep/ ocalhoswmysite/e p ~ sc Be |S poco ~ So 











图 9.13 正 6 中 浮动 布局 效果 9.14 调整 部 分 栏目 高 度 后 发 生 的 错位 现象 
这 时 clear 属性 就 可 以 派 上 用 场 了 ， 为 <div id="footer"> 元 素 定 义 一 个 清除 样式 ， 代 码 如 下 。 
#footer { clear:left: /*# 为 脚 部 栏目 元 素 定义 清除 属性 */ 


} 
在 浏览 器 中 预览 ， 则 又 恢复 到 预 设 的 3 行 3 列 布局 效果 ， 如 图 9.15 所 示 。 








图 9.15 清除 浮动 元 素 错 行 显示 


a 





(sss1DI 网 页 样式 与 市 局 从 入 门 到 精通 【 答 锂 精 编 县 ) 





会 提示 : clear 属性 是 专门 针对 float 属性 而 设计 的 ， 因 此 仅 能 够 对 左右 两 侧 浮动 元 素 有 效 ， 对 于 非 
浮动 元 素 是 无 效 的 。 
这 里 所 谓 的 清除 ， 不 是 清除 浮动 元 系 ， 而 是 清除 目 身 ， 通 俗 地 说 就 是 不 允许 当前 元 素 与 浮动 元 
素 并 列 显示 。 如 果 左 右 两 侧 存在 浮动 元 素 ， 则 当前 元 素 把 目 己 清除 到 下 一 行 显 示 ， 而 不 是 把 前 面 的 
浮动 元 系 清除 到 下 一 行 显示 或 者 清除 到 上 一 行 显示 。 


9.3.3 ”浮动 芷 套 

浮动 元 素 可 以 相互 能 套 ， 般 套 规 律 与 流动 元 素 舱 套 相 同 。 浮 动 的 包含 元 素 总 会 自动 调整 自身 高 
度 和 宽度 以 实现 对 浮动 子 元 素 的 包含 。 

【示例 1】 新 建文 档 ， 构 建 两 个 简单 的 艇 套 块 ， 然 后 强制 它们 浮动 显示 ， 并 定义 子 元 素 的 高 度 和 
宽度 ， 使 其 显示 为 一 定 大 小 的 区 域 ， 这 时 会 发 现 父 元 素 会 自动 调整 自身 大 小 来 包含 子 元 素 。 代 人 码 如 


下 ， 效 果 如 图 9.16 所 示 。 








<style type="text/css"> 
.wrap { border: solid 2px red; float: left: margin:4px;} 
.sub { width: 200px: height: 200px; float: left: background: blue: } 
</style> 
<div class="wrap"> 
<div class="sub"></div> 
</div> 
<span class="wrap"> 
<span class="sub"></span> 


</span> 


窑 提示 : 如 果 包 含 元 素 定义 了 高 度 和 宽度 ， 则 它 就 不 会 随 子 元 素 的 大 小 而 自动 调整 自身 显示 区 域 
来 适应 子 元 素 的 显示 ， 如 图 9.17 所 示 。 注 意 , 在 IE6 及 更 低 版 本 的 浏览 器 中 包含 框 仍然 
能 够 自动 调整 自身 大 小 来 适应 子 元 素 的 显示 大 小 ， 不 过 在 IE 7 版 本 中 ， 微 软 纠 正 了 这 个 
不 符合 标准 的 显示 方法 。 





图 9.16 浮动 舱 套 图 9.17 浮动 谈 套 存在 问题 


"280 。 
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【示例 2】 如 果 把 浮动 元 素 散 入 流动 元 素 内 ， 则 父 元 素 不 能 自 适 应 子 浮动 元 素 的 高 度 。 代 码 如 下 ， 
效果 如 图 9.18 所 示 。 


<style type="text/css"> 

#contain { background: #FF99FF: } /*# 包 含 元 素 #/ 
span {float: left: width: 200px: height: 100px: } /*# 定 义 共 同属 性 和 
上 # 内 嵌 浮 动 对 象 样式 */ 

#spanl { border: solid blue 10px:; } 

#span2 { border: solid red 10px; } 

</style> 





<div 1d="contain"> 
<span id="span1">span 元 素 浮动 </span> 
<span id="span2">span 元 素 浮动 </span> 
</div> 


S| ES http://localhost/mysite/ P -有 


spamxyD 京 竹 spanD 床 伯 





图 9.18 ”和 赃 套 浮动 元 素 


在 图 9.18 中 可 以 看 到 包含 元 素 div 并 没有 显示 。 原 因 就 是 包含 元 素 没有 适应 子 元 素 的 高 度 ， 而 
是 根据 自身 定义 的 属性 以 独立 的 形式 显示 。 所 以 ， 在 应 用 混合 肉 套 时 ， 要 预测 到 浮动 与 流动 混合 布 
局 时 会 出 现 的 各 种 怪 现 象 ， 并 积极 做 好 兼容 处 理 。 

解决 方法 : 可 以 在 包含 元 素 内 的 最 后 一 行 添加 一 个 清除 元 素 ， 强 制 撑 开 包含 元 素 ， 使 其 包含 浮 
动 元 素 ， 代 码 如 下 ， 显 示 结 果 如 图 9.19 所 示 。 


<style type="text/css"> 
#contain { background: #FF99FF: } /#* 包 含 元 素 #/ 
span {float: left: width: 200px;: height: 100px: } /*# 定 义 共 同属 性 #/ 


此 内 嵌 浮 动 对 象 样式 */ 
#spanl { border: solid blue 10px:; } 
#span2 { border: solid red 10px; } 
.clear {clear:both:; } 上 * 定 义 清除 类 */ 
</style> 
<div 1d="contain"> 
<span id="span1">span 元 素 浮动 </span> 


:| 





过 


全 让 \ </div> 





9.3.4 混合 浮动 布局 





1. 调整 左右 栏 间距 


图 9.20 所 示 。 


<style type="text/css"> 
#contain {/* 页 面 布局 包含 元 素 */ 
width:774px:; 
border:double 4px #aaa; 
padding: 12px; 
overflow:visible: 
} 
#contain img {/* 定 义 左 侧 图 片 浮动 显示 */ 
width:200px; 
height: 1 00px; 
float:left: 
clear:left: 
margin:0 12px 6px 0; 
padding:6px; 
border:solid 1px #999; 
} 
#contain h2 { text-align:center;} 
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<span ld="span2">span 元 素 浮 动 </span> 
<div class="clear"></div><!-- 增 加 一 个 清除 元 素 --> 


xX 


二 sll EE http://localhost/mysite/ PP ~ 有 地 全 localhost x 痛 不 这 


图 9.19 正确 显示 效果 


浮动 布局 模型 相 比 流动 布局 模型 要 复杂 很 多 ， 当 混合 浮动 和 流动 布局 时 就 容易 遇 到 很 多 问题 ， 
下 面 结合 示例 介绍 间 见 的 问题 和 解决 办 法 。 


【示例 1】 制 作 堪 右 两 栏 的 页 面 ， 左 栏 是 浮动 布局 ， 右 栏 是 流动 布局 。 代 码 如 下 ， 显 示 效 果 如 


谍 定 义 页 面 宽 */ 

访 定 义 页 面 边框 */ 

放 为 页 面包 含 元 素 增加 补 白 */ 

诺 定 义 包含 元 素 自动 伸缩 显示 所 有 包含 内 容 */ 


/# 定 义 图 片 单列 显示 
/# 定 义 图 片 的 边界 % 


上 话 定 义 右 侧 标题 居中 */ 


22 





#contain p {/* 定 义 段落 属性 */ 


} 


.Clear {clear:both;} 
</style> 
<div 1d="contain"> 


上 和 面 的 示例 在 图 文 混 排 的 基础 上 利用 浮动 模型 设计 了 一 个 更 漂亮 的 图 片 通 栏 布局 。 使 用 float 属 
性 定义 所 有 图 片 同 左 浮动 ， 定 义 clear 属性 清除 相 邻 图 片 并 列 浮动 ， 将 一 组 图 片 垂直 排列 。 通 过 定义 
左 栏 浮动 、 右 栏 流动 ， 保 证 页 面 中 的 文本 围绕 图 片 在 右 侧 显示 。 
如 果 加 大 右 侧 文本 与 左 侧 图 片 之 间 的 间距 ， 一 般 用 户 会 定义 p 元 素 的 margin-left 或 padding-left 
属性 值 ， 但 会 发 现 为 p 元 素 定 义 左 边界 或 左 补 日 之 后 ， 左 右 栏 间距 没有 变 。 
解决 方法 : 不 要 定义 流动 元 素 的 边界 或 补 日 ， 而 是 定义 浮动 元 素 的 边界 或 补 日 ， 实 现 调控 间距 


line-height:1.8em; 


text-1indent:2em: 


第 日 章 使 用 DIV+CSS 设计 网页 


WN\ 


> 


/# 此 时 该 属性 左 侧 值 最 让 人 困惑 ， 为 什么 ? */ 
6# 此 时 该 属性 左 侧 值 最 让 人 困惑 ， 为 什么 ? */ 


人 # 定 义 清除 类 ， 处 理 非 正 浏览 器 不 能 自 适 应 包容 问题 */ 


<img src="bgl10.jpg" /><img src="bg7.jpg" /><img sTc="bg2.]pg" /><img src="bg3.jpg" /> 
<h2>《 荷 塘 月 色 》 节选 》</h2> 
<p> 曲 曲折 折 的 荷塘 上 面 ， 弥 望 的 是 田 田 的 叶子 。 叶 子 出 水 很 高 ， 像 享 享 的 舞女 的 裙 。…</p> 
<div class="clear"></div> 
</div> 


| SG http://localhost/mysite/test.html DP™ cE localhost 





























《荷塘 月 色 》 【节选 ) 


曲 曲 折 折 的 荷塘 上 面 ， 弥 望 的 是 田 田 的 叶子 。 叶 子 出 水 很 高 ， 俐 亭 享 的 舞女 的 窜 。 层 层 的 叶 
子 中 间 ， 堆 星 地 点 绢 着 些 白 花 ， 有 扫 儿 地 开 着 ， 有 苦涩 的 打 痢 水 儿 的 ; 正如 一 粒 粒 的 明珠 ， 又 
如 七 天 里 的 星星 ， 叉 如 刚 出 浴 的 美 估 。 微风 过 址 ， 疼 未 绪 续 清香 ， 仿 能 远 处 高 禄 上 镍 花 的 歌声 
似 的 。 这 时 候 叶 子 与 花 也 有 一 些 的 闸 动 ， 生 闪电 般 ， 雪 时 传 过 荷塘 的 那 边 去 了 。 叶 子 本 是 肩 并 


肩 密 密 的 捉 着 ， 这 便 克 然 有 了 一 道 帮 机 的 波 交 。 叶子 底 下 是 访 菊 的 注水 ， 所 住 了 ， 不 能 见 一 些 
颜色 ; 而 叶子 却 更 见 风 致 了 。 
月 光 如 流水 一 般 ， 幕 更 地 汝 在 这 一 片 叶子 和 花 上 。 簿 薄 的 青 雾 浮 起 在 荷 娘 里 。 叶子 和 和 花 仿佛 


在 牛乳 中 洗 过 一 样 ; 又 合意 着 轻 钞 的 欧 。 虽 然 是 蒲 月 ， 天 上 却 有 一 层 浅 浅 的 云 ， 所 以 不 能 朗 
照 ， 但 我 以 为 这 恰 是 到 了 好 处 - - 醋 眼 固 不 可 少 ， 小 睡 也 别有风味 的 。 月 光 是 隔 了 树 照 过 来 
的 ， 高 处 丛生 的 灌木 ， 落 下 参差 的 斑驳 的 旦 影 ， 却 双重 是 画 在 荷 叶 上 。 革 中 的 月 色 并 不 均匀 ， 
但 光与影 有 着 和 谐 的 旋律 ， 如 许 姻 玲 上 奏 着 的 名 曲 。 

褒 墙 的 四 面 : 远 远 近 近 ， 高 高 个 性 的 都 是 桂 ， 而 杨 材 最 多。 这 些 树 将 一 片 荷 堪 重重 围 住 ; 只 





1 在 小 路 一 和 旁 ， 章 着 几 段 空 障 ， 像 是 特 为 月 光 留 下 的 。 树 色 一 例 是 阴 阴 的 ， 乍 看 像 一 团 烟 筋 ! 但 


杨 覆 的 丰 姿 ， 便 在 烽 恤 里 也 辩 得 出 。 树 梢 上 隐隐 约 约 的 是 一 帝 远 山 ， 只 有 些 太 意 轿 了。 树 综 里 
也 所 着 一 两 点 路 灯光 ， 没 精 打 彩 的 ， 是 温 睡 人 的 眼 。 这 时 假 最 热闹 的 ， 要 的 树 上 的 蝉 声 与 水 里 
的 蛙 声 ; 得 热 南 的 是 它们 的 ， 我 什么 也 没有 。 








图 9.20 默认 显示 效果 


A 











的 目的 ， 因 为 浮动 元 素 的 边界 和 补 白 不 会 被 流动 元 素 履 盖 。 例 如 ， 定 义 浮动 图 像 的 右 侧 边界 为 50 像 
素 ， 代 码 如 下 ， 效 果 如 图 9.21 所 示 。 


: margin:0 S50px 6px 0; 


4 al SS http;//localhost/mysite/tesi1.html 人 D7 呈 C || B localhost 








《荷塘 月 色 》 (节选 ) 


曲 曲 折 折 的 荷塘 上 面 ; 六 望 的 是 田 田 的 叶子 。 叶 子 出 水 很 高 ， 爸 襄 襄 的 和 舞女 的 禄 。 层 
层 的 叶 子 中间 ， 截 星 地 点 名 着 些 白花 ， 有 热 孵 地 开 着 ， 有 羞涩 的 打 着 朱 儿 的 ; 正如 一 垃 
粒 的 明珠 ， 又 如 碧 天 里 的 星星 ， 又 如 刚 出 治 的 美人 。 秽 风 过 处 ， 兰 未 缔 缔 背 香 ， 仿 淖 运 
趟 高 楼 上 殉 范 的 歌声 仆 的 。 这 时 候 叶 子 与 花 也 有 一 些 的 额 动 ， 像 闪电 般 ， 雪 时 传 过 荷 入 
的 那 边 去 了 * 叶子 本 是 肩 并 户 密 密 的 挨 着 ， 这 便 邦 然 有 了 一 道 凝 碧 的 波 痕 。 叶子 底下 是 
脉 脉 的 流水 ; 还 任 了 ， 不 能 见 一 些 颜色 ; 而 叶子 却 更 见 风 致 了 。 

月 光 如 沪 水 一 息 ， 静 静 地 泻 在 这 一 片 叶 子 和 花 上 。 落落 的 青 过 浮 起 在 荷 娃 里 。 叶 子 和 
花 仿 佛 在 牛乳 中 洗 过 一 样 ! 又 像 答 着 轻 纱 的 转 。 虽 然 是 满月 ， 天 上 却 有 一 层 淡 淡 的 云 ， 
所 以 不 能 度 照 ; 但 我 以 为 这 恰 是 到 了 好 处 - - 柄 眠 固 不 可 少 ， 小 睡 也 别 有 风 哇 的。 月 光 
是 及 了 树 晕 过 来 的 ， 高 处 从 生 的 灌木 ， 落 下 爷 差 的 斑 驶 的 黑 影 ， 却 又 像 是 国 在 葵 叶 上 。 
粮 中 的 月 色 并 不 均匀 ， 但 光与影 有 着 和 和 诺 的 旋律 ， 如 焚 姻 玲 上 奏 着 的 名 曲 。 

荷 头 的 四 面 : 远 远近 近 ， 高 高 八代 的 都 是 树 ， 而 杨柳 最 条 。 这些 树 将 一 片 荷 娘 重 重围 
住 ; 只 在 小 路 一 旁 ， 震 着 几 段 空 阶 ， 和 像 是 特 为 月 光 留 下 的 。 树 色 一 例 是 阴 阴 的 ， 乍 看 知 
一 团 烟 过 ; 但 杨柳 的 丰 容 ， 便 在 烟雾 里 也 状 得 出 。 树 梢 上 隐隐 约 约 的 是 一 带 远 山 ， 只 有 
些 大 意 轻 了 。 树 哈里 也 淆 着 一 两 点 路 灯光 ， 没 精 打 彩 的 ， 是 渴 睡 人 的 眼 。 这 时 假 最 热闹 
的 ， 到 数 树 上 的 远 户 与 水 里 的 蛙 声 ; 但 热闹 的 是 它们 的 ， 我 什么 也 没有 。 





























图 9.21 显示 效果 


2. 调整 上 下 栏 间距 


上 下 栏 之 间 的 浮动 与 流动 混合 布局 也 比较 复杂 ， 如 上 下 栏 间 距 不 易 调 整 、 布 局 偶尔 错乱 等 。 
【示例 2】 在 示例 1 的 基础 上 ， 给 图 文 页 面 增加 一 个 导航 条 。 代 码 如 下 ， 显 示 结 果 如 图 9.22 所 示 。 


<style type="text/css"> 
body {/* 定 义 窗口 属 性 */ 
margin:0; /* 清 除 下 默认 边界 属性 值 */ 
| padding:0; /* 清 除非 正 默认 补 白 属性 值 */ 
} 
#nav {/* 定 义 导 航 列表 框 属性 */ 
: margin:0; /# 清 除 正 默认 缩 进 属性 值 */ 
| padding:0; /* 清 除非 正 默认 缩 进 属性 值 和 
: list-style-type:none; /* 清 除 浏 览 器 默认 列表 样式 */ 
四 


#nav li {/* 定 义 菜单 列表 项 显示 效果 */ 
float:left: /* 问 左 浮 动 */ 
width:100px; height:32px; 
| line-height:32px: /* 垂 直 居 中 */ 
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ee%, a (sss+DI0 网 页 样式 与 布局 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


cc > 并 http://localhost/mysite/test2.html 


《荷塘 月 色 》 (节选 ) 


曲 曲 折 折 的 荷塘 上 面 ， 浆 望 的 是 田 田 的 叶子 。 叶 子 出 水 很 高 ， 像 训 训 的 到 女 的 裙 。 层 层 的 叶 
子 中 间 ， 零 宇 地 点 纺 著 些 白 花 ， 有 伯 嘟 地 开 着 ， 有 鞭 深 的 打 着 米 儿 的 ; 正如 一 垃 粒 的 图 球 ， 叉 
如 机 天 里 的 星星 ， 又 如 刚 出 治 的 美人 * 徽 风 过 处 ， 庆 来 半 半 青 得， 仿佛 远 处 高 可 上 水 汞 的 歌声 
似 的 。 这 时 候 叶 子 与 花 也 有 一 些 的 晤 动 ， 银 闪电 般 ， 霓 时 传 过 荷 嬉 的 那 边 去 了 。 叶 子 本 是 向 并 
肩 客 客 的 扫 着 ， 这 和 便 克 然 有 了 一 道 凝 碧 的 波 疯 。 叶 子 底下 是 脉 脉 的 流水 ， 亦 住 了 ,不 能 见 一 些 
颜色 而 叶子 却 更 见 风 致 了 。 

月 光 如 流水 一 般 ， 静 静 地 演 在 这 一 片 叶子 和 人 花 上 。 薄 薄 的 青 圾 浮 起 在 荷 娘 里 。 叶 子 和 花 念佛 
在 牛乳 中 洗 过 一 样 ! 又 像 签 着 轻 纱 的 梦 。 虽 然 是 茵 月 ， 天 上 却 有 一 层 潜 淡 的 云 ， 所 以 不 能 户 
照 ; 但 我 以 为 这 愉 是 到 了 好 处 ~ ~ 醒 眠 固 不 可 少 ， 小 睡 也 别有风味 的 。 月 光 是 隔 了 树 照 过 来 
的 ， 高 处 从 生 的 灌木 ， 落 下 条 差 的 班 怠 的 黑 影 ， 却 又 像 是 画 在 苟 叶 上 。 塘 中 的 月 色 并 不 均匀 ， 
但 光与影 有 兰 和 谐 的 诺 律 ， 加 办 帅 珍 上 霹 若 的 名 曲 。 

荷 娘 的 四 面 ， 远 远近 近 ， 遍 总 低 低 的 者 是 树 ， 而 杨 存 最 多 。 这些 树 将 一 片 荷 转 重 重围 住 ; 只 
在 小 路 一 旁 ， 渍 着 几 段 空 阶 ， 像 是 特 为 月 光 留 下 的 。 树 色 一 便 是 阴 阴 的 ， 乍 看 急 一 团 烟雾 ， 但 
] 思 都 的 丰 容 ， 便 在 烟 盘 里 也 状 得 出 。 树 梢 上 隐隐 约 约 的 是 一 带 远 山 ， 只 有 些 大 意 轩 了 。 树 纤 里 
也 蜀 着 一 两 点 路 灯光 ， 没 精 打 彩 的 ， 是 渴 唾 人 的 眼 。 亿 时 假 最 热闹 的 ， 要 施 树 上 的 暗 声 与 水 里 
的 蛙 声 但 热 半 的 是 它们 的 ,我 什么 也 受 有 。 
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图 9.22 调整 空 际 


图 9.22 显示 导航 条 已 经 进入 下 面 的 栏目 内 部 ， 其 解决 方法 是 在 列表 项 最 后 添加 一 个 清除 元 素 ， 
强迫 上 和 面 的 ul 元 系 目 适应 高 度 ， 以 实现 包含 其 内 部 的 浮动 列表 项 。 代 码 如 下 。 


<div class="clear"></div> 


这 样 就 不 会 出 现 浮动 元 素 与 流动 包含 元 素 相互 脱节 的 现象 ， 使 浮动 元 素 在 上 面 栏 目的 包含 框 中 ， 
显示 效果 如 图 9.23 所 示 。 


区 一 ll 全 htipx/localhosty/mysite/test3,.html 有 -RdcC SS localhost 








《荷塘 月 色 》 (节选 ) 

曲 曲 折 折 的 葵 塘 上 而 ， 弥 望 的 是 田 田 的 叶子 。 叶子 出 水 很 高 ， 像 亭 享 的 舞女 的 禄 。 层 层 的 叶 
子 中 间 ， 委 星 地 点 锯 兰 些 白花 ， 有 和 扰 岂 地 开 着 ， 有 羞涩 的 打 着 未 儿 的 ; 正如 一 粒 粒 的 明珠 ， 又 
如 眉 天 里 的 呈 星 ， 又 如 刚 出 浴 的 美人 。 微风 过 处 ， 送 来 继续 消 香 ， 优 佛 远 处 高 被 上 小 茫 的 歌声 
似 的 。 这 时 候 叶 子 与 花 也 有 一 些 的 额 动 ， 像 闪电 般 ， 委 时 传 过 荷 匡 的 那 边 去 了 。 叶 子 本 是 肩 并 
肩 密 密 的 欣 若 ， 这 便 充 然 有 了 一 道 凝 厂 的 波 疯 。 叶子 底下 是 脉 恋 的 流水 ， 玲 住 了 ， 不 能 见 一 些 
颜色 ; 而 叶子 却 更 见 风 玖 了 。 

月 光 如 流水 一 般 ， 静 甫 地 污 在 人 这 一 片 叶 子 和 人 花 上 。 沙沙 的 青 雾 浮 起 在 藻 嬉 里 。 叶 子 和 花 仿 便 
在 牛乳 中 洗 过 一 样 ; 只 像 答 着 轻 纱 的 苛 。 虽 然 是 茵 月 ， 天 上 却 有 一 层 浅 浅 的 云 ， 所 以 不 能 请 
照 ! 但 我 以 为 这 愉 是 到 了 好 处 ~ - 柄 眠 固 不 司 少 : 小 锤 也 别有风味 的 。 月 光 是 隔 了 树 照 过 来 
的 ， 高 处 丛生 的 潍 木 ， 落 下 参差 的 斑 歌 的 黑 影 ， 却 叉 贸 是 夯 在 茶叶 上 。 稿 中 的 月 色 并 不 均匀 ， 
但 光与影 有 着 和 放 的 旋律 ， 加 禁 蚌 珍 上 泰 着 的 名 曲 。 

荷 峙 的 四 面 ， 远 远近 近 ， 高 高 低 低 的 都 是 树 ， 而 杨 神 最 和 多。 这些 树 将 一 片 苘 塘 重 重 国 住 ; 只 
在 小 路 一 旁 ， 据 着 几 段 空 隐 ， 像 是 特 为 月 光 钱 下 的 。 树 色 一 创 是 阴 阴 的 ， 乍 看 像 一 团 曙 雾 ; 但 
祝 祁 的 丰 容 ， 便 在 烟 吉 里 也 罪 得 出 。 树 梅 上 隐 辽 的 约 的 是 一 带 远 山 ， 只 有 些 大 总 秋 了 。 树 链 里 
也 量 若 一 两 点 路 灯光 ， 没 精 打 彩 的 ， 是 渴 上 星人 的 眼 。 这 时 候 最 热闹 的 ， 要 数 树 上 的 星 声 与 水 里 
的 星 户 ; 但 热 且 的 是 它们 的 ， 我 什么 也 没有 。 





























图 9.23 正确 显示 效果 
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94 定位 显示 


定位 布局 的 设计 思路 比较 简单 ， 它 允许 用 户 精 确定 义 网 页 元 素 的 显示 位 置 ， 可 以 是 绝对 位 置 ， 
也 可 以 是 相对 位 置 。 


9.4.1 定义 定位 显示 
position: static | relative | absolute | fixed 


取 值 说 明 如 下 。 
四 static: 表示 不 定位 ， 元 素 遵循 HTML 默认 的 流动 模型 ， 如 果 未 显 式 声 明 元 素 的 定位 类 型 ， 
则 默认 为 该 值 。 
四 relative: 表示 相对 定位 ， 它 通过 left、right、top、bottom 属性 确定 元 素 在 正常 文档 流 中 优 
移 位 置 。 相 对 定位 完成 的 过 程 是 首先 按 static 方式 生成 一 个 元 素 , 然后 移动 这 个 元 素 , 移动 
方向 和 幅度 由 left、right、top、bottom 属性 确定 ， 元 素 的 形状 和 偏 移 前 的 位 置 保留 不 动 。 
名 ”absolute: 表示 绝对 定位 ， 将 元 素 从 文档 流 中 拖 出 来 ， 然 后 使 用 left、right、top、bottom 属 
性 相对 于 其 最 接近 的 一 个 具有 定位 属性 的 父 定位 包含 框 进行 绝对 定位 。 如 果 不 存 在 这 样 的 
定位 包含 框 ， 则 相对 于 浏览 器 窗口 ， 其 层 登 顺序 则 通过 z-index 属性 来 定义 。 
加 ”fixed: 表示 固定 定位 ， 与 absolute 定位 类 型 类 似 ， 但 它 的 定位 包含 框 是 视图 本 身 ， 由 于 视 
图 本 身 是 固定 的 ， 它 不 会 随 浏览 器 窗口 的 深 动 条 深 动 而 变化 ， 除 非 在 屏幕 中 移动 浏览 器 窗 
口 的 位 置 或 改变 浏览 器 窗口 的 显示 大 小 ， 因 此 固定 定位 的 元 素 会 始终 位 于 浏览 器 窗口 内 视 
图 的 茶 个 位 置 ， 不 会 受 文档 流动 影响 ， 这 与 background-attachment:fixed; 属 性 功能 相同 。 
与 浮动 元 素 一 样 ， 绝 对 定位 元 素 以 块 状 显示 ， 它 会 为 所 有 子 元 素 建 立 一 个 定位 包含 框 ， 所 有 被 
包含 元 素 都 以 定位 包含 框 作 为 参照 物 进 行 定 位 或 在 其 内 部 浮动 和 流动 。 
【示例 1】 在 本 示例 中 ， 定 义 了 3 个 不 同 模型 的 包含 元 素 ， 然 后 观察 不 同 模型 的 包含 元 素 与 它们 
的 子 元 素 的 位 置 关 系 。 代 码 如 下 ， 效 果 如 图 9.24 所 示 。 


<style type="text/css"> 
#contain1, #contain2, #contain3 {/* 定 义 3 个 一 级 div 元 素 对 象 的 共同 属性 */ 
width: 380px:helght: 120px: border: solid 1px #666; 
} 
#contain2 {/* 定 义 第 2 个 一 级 div 元 素 对 象 为 绝对 定位 ， 并 设置 其 距离 窗口 左边 和 上 边 的 距离 */ 
position: absolute: left: 120px:; top: 60px; background: #F08080; 
} 
#contain3 {/* 定 义 第 3 个 一 级 div 元 素 对 象 为 浮动 布局 */ 
float: left: background: #D2B48C: 
} 


i 








网 页 样式 与 布局 从 入 门 到 精通 ( 微 课 精 编 版 ) 





#contain2 div {/* 定 义 绝对 定位 对 象 内 所 有 子 元 素 对 象 的 共同 属性 */ 
color: #993399; border: solid 1px #FF0000; 

} 

#sub_div1 {l#* 定 义 绝 对 定位 对 象 包含 框 内 第 1 个 对 象 为 绝对 定位 */ 
width: 80px; height: 80px: position: absolute; 
right: 10px; /* 定 义 该 绝对 元 素 右 边 距 离 父 级 定位 包含 框 的 右边 距离 */ 
bottom: 10px; /* 定 义 该 绝对 元 素 底 边 距离 父 级 定位 包含 框 的 底 边 距离 */ 
background: #F EF68F:; 

} 

#sub_div2 {l#* 定 义 绝 对 定位 对 象 包 含 框 内 第 2 个 元 素 为 浮动 布局 */ 
width: 80px; height: 80px: float: left; background: #DDAODD:; 

} 

#sub_div3 {/* 定 义 绝对 定位 对 象 包含 框 内 第 3 个 元 素 的 背景 色 、 宽 和 高 */ 
width: 100px; height: 90px; background: #CCFF66; 

} 

</style> 

<div id="contain1"> 元 素 一 流动 </div> 

<div id="contain2"> 元 素 二 一 绝对 定位 
<div id="sub_div1"> 子 元 素 1 一 绝对 定位 </div> 
<div id="sub_div2"> 子 元 素 2 一 浮动 </div> 
<div id="sub div3"> 子 元 素 3 一 流动 </div> 

</div> 

<div id="contain3"> 元 素 三 一 浮动 </div> 











图 9.24 定位 显示 


从 图 9.24 可 以 看 到 “元 素 二 ”被 定义 为 绝对 定位 ， 它 以 浏览 句 窗 口 为 定位 包含 框 ， 显 示 位 置 根 
据 元 素 左 边 到 窗口 左边 的 距离 和 元 素 上 边 到 窗口 上 边 的 距离 来 确定 。 而 “ 子 元 素 1” 却 以 具有 定位 属 
性 的 “元 素 二 ”为 定位 包含 框 ， 显 示 位 置 根据 “ 子 元 素 1” 右 边 到 “元 素 二 ”右边 的 距离 和 元 素 底 边 
到 “元 素 二 ” 底 边 的 距离 来 确定 。 在 “元 素 二 ”中 包含 了 3 个 子 元 素 ， 它 们 以 不 同 的 性 质 显示 ， 但 
它们 都 以 “元 素 二 ”作为 参照 平台 ， 包 括 其 中 的 浮动 元 系 和 绝对 定位 元 素 。 


和 
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如 果 把 行内 元 素 作 为 定位 包含 框 ， 情 况 就 很 复杂 ， 因 为 行内 元 素 有 可 能 在 几 行 内 显示 ， 产 生 好 
几 个 线性 盒 ， 这 时 定位 包含 框 就 被 定义 为 这 几 行 区 域 ， 而 其 内 部 被 包含 的 绝对 定位 子 元 素 将 根据 行 
内 元 素 的 第 1 行 第 1 个 字符 左上 角 来 确定 left 和 top 属性 的 偏 移 值 , 根据 第 一 行 最 后 一 个 字符 的 右 下 
角 来 确定 right 和 bottom 属性 的 偏 移 值 。 

【示例 2】 在 本 示例 中 ， 在 文本 段 中 设置 两 个 相互 租 套 的 span 元 素 ， 然 后 把 外 层 的 span 元 素 定 
义 为 定位 包含 框 ， 而 把 内 层 的 span 元 素 定 义 为 绝对 定位 ， 并 进行 偏 移 定位 。 代 码 如 下 ， 显 示 效 果 如 
图 9.25 所 示 。 





<style type="text/css"> 
Pp {人 * 定 义 文本 段 属性 */ 
width: 400px; height: 200px; 
border: dashed 1px green:; 
} 
执 elative {* 定 义 定位 包含 框 ， 并 用 蓝 色 线 框 标示 */ 
position: relative; 
border: solid 1px blue; 
} 
#absolute {/* 定 义 绝对 定位 子 元 素 ， 并 同 右 下 角 偏 移 200px*/ 
position: absolute; 
left: 200px: top: 200px; 
border: solid 2px red: 
} 
</style> 
<p> 在 用 CSS 控制 排版 过 程 中 ，<span id="relative"> 定 位 一 直 被 人 认为 是 一 个 难点 ， 这 主要 是 表现 为 很 多 
网 友 在 没有 深入 理解 清楚 定位 的 原理 时 ， 排 出 来 的 杂乱 网 页 常 让 他 们 不 知 所 措 ， 而 男 一 边 一 些 高 手 则 常常 借助 
定位 的 强大 功能 做 出 些 很 酷 的 效果 来 ，<span ”id="absolute"> 比 如 CSS 相册 等 等 </span>， 因 此 自己 杂乱 的 网 页 
与 高 手 完 美的 设计 形成 鲜明 对 比 ，</span> 这 在 一 定 程 度 上 打击 了 初学 定位 的 网 友 ， 也 在 他 们 心目 中 形成 这 样 
的 一 种 思想 : 当 我 熟练 地 玩 转 CSS 定位 时 ， 我 就 已 是 高 手 了 。 </p> 


EE http://localho ys te PD BCE localhost 











图 9.25 子 元 素 定位 1 
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在 图 9.25 中 ，a 所 指示 的 位 置 为 子 元 素 定位 前 的 位 置 ，b 所 指示 的 项 角 为 子 元 素 偏 移 的 参考 点 ， 
c 所 指示 的 项 角 为 偏 移 后 的 定位 点 。 可 以 看 到 ， 在 定位 包含 框 多 行 显示 时 ， 内 部 定位 元 素 将 根据 b 点 
(第 1 行 第 1 个 字 的 左上 角 ) 进行 偏 移 定位 ， 而 不 是 以 文本 段 左 上 角 为 参考 点 进行 定位 。 

如 果 定 义 right 和 bottom 属性 进行 偏 移 (其 中 CSS 代码 如 下 )， 内 部 定位 元 素 将 根据 b 点 (第 1 
行 最 后 1 个 字 的 右 下 角 ) 进行 偏 移 定 位 ， 而 不 是 以 文本 段 右 下 角 为 参考 点 进行 定位 。 


#absolute {/* 定 义 绝对 定位 子 元 素 ， 并 同 左 上 角 偏 移 100px*/ 
position:absolute:; 
right: 1 O00px; 
bottom:100px; 
border:solid 2px red: 
} 


9.4.2 ”定位 框 


CSS 定位 包含 框 是 标准 布局 中 的 一 个 重要 概念 ， 它 是 绝对 定位 的 基础 。 注 意 ， 要 区 分 定位 包含 
框 与 父 元 泰 、 包 含 框 或 包含 元 系 等 概念 。 

定位 包含 框 就 是 为 绝对 定位 元 系 提 供 坐 标 偏 移 和 显示 范围 的 参照 物 ， 即 确定 绝对 定位 的 偏 移 起 
点 和 日 分 比 长 度 的 参考 。 在 默认 状态 下 ，body 元 素 就 是 一 个 根 定位 包含 框 ， 所 有 绝对 定位 的 元 素 就 
是 根据 窗口 来 确定 自己 所 处 的 位 置 和 百分比 大 小 显示 的 。 但 是 如 果 定 义 了 包含 元 素 为 定位 包含 框 以 
后 ， 对 于 被 包含 的 绝对 定位 元 素来 说 ， 就 会 根据 最 接近 的 具有 定位 功能 的 上 级 包含 元 素来 决定 目 己 
的 显示 位 置 。 

【示例 】 为 了 能 直观 地 理解 定位 包含 框 ， 本 示例 先 构 建 一 个 HIML 代码 模块 。 


<div 1d="a"> 

<dlv 1d="c"></div> 
</div> 
<div 1d="b"> 

<div 1d="d"></div> 
</div> 


在 上 面 的 代码 中 ， 构 建 了 两 个 定位 包含 框 ， 它 们 分 别 包 含 了 一 个 元 么 。 下 面 用 CSS 定义 这 两 个 
包含 元 素 的 大 小 为 200px *200px， 并 浮动 在 窗口 的 中 间 区 域 ， 代 码 如 下 。 


#a,#b {/* 定义 包含 元 素 的 共同 属性 */ 


width:200px:; 

height:200px; 

float:left: 

margin-top:50px: 谍 拉 开 与 窗口 顶部 的 距离 */ 
border:solid 1px red: 上 # 定义 红色 边框 线 ， 便 于 识别 */ 


和 证 
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同时 单独 定义 b 包含 元 素 为 相对 定位 ， 确 定 它 是 一 个 定位 包含 框 ， 代 人 码 如 下 。 


#b {/* 定义 包含 元 素 b 为 相对 定位 ， 确 定 它 为 定位 包含 框 */ 
position:relative:; 
margin-left:50px: /# 拉 开 与 b 包含 元 素 的 距离 */ 
} 
然后 ， 定 义 两 个 被 包含 元 素 为 绝对 定位 ， 大 小 为 50%*50%， 并 都 偏 移 50%， 代 码 如 下 。 


#c,#d {/* 定义 被 包含 元 素 绝对 定位 ， 并 进行 偏 移 */ 


width:50%: 

height:50%; 

position:absolute; 

left:50%; 上 # 与 定位 包含 框 左 侧 边 框 距离 为 50% */ 
top:50%;: 上 # 与 定位 包含 框 顶部 边框 距离 为 50% */ 


最 后 ， 分 别 为 两 个 被 包含 元 素 定义 不 同 的 背景 颜色 ， 以 便于 区 别 ， 显 示 效 果 如 图 9.26 所 示 。 


碟 http://localhost/mysite/test.html PY BE localhost 

















图 9.26 定义 定位 包含 框 


在 图 9.26 所 示 的 演示 效果 中 , 被 a 包 含 元 素 包 含 的 c 子 元 素 以 窗口 body 元 素 的 左上 点 为 坐标 原 
点 进行 绝对 定位 偏 移 ， 百 分 比 大 小 取 值 也 根据 窗口 的 大 小 来 确定 ， 即 为 窗口 宽度 和 高 度 的 一 半 。 

而 b 包含 元 素 被 定义 为 相对 定位 ， 它 就 成 为 一 个 定位 包含 框 ， 因 此 , 被 它 包 含 的 d 元 素 就 会 以 
b 元 素 的 左上 角 为 坐标 原点 进行 绝对 定位 偏 移 ， 它 的 百分比 大 小 取 值 也 会 根据 b 元 素 的 大 小 来 确定 ， 
而 不 是 以 窗口 为 参照 物 。 

但 是 ， 在 正 早 期 版 本 浏览 器 中 对 于 被 包含 的 绝对 定位 元 素 的 百分比 大 小 解析 依然 存在 问题 ， 如 
图 9.27 所 示 。 


wg 
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图 9.27 正中 的 定位 包含 框 显示 效果 


图 9.27 是 上 面 示例 在 IE 6 浏览 器 中 的 预览 效果 ， 可 以 看 到 ， 对 于 坐标 偏 移 解析 方面 ，IE 与 其 他 
”现代 标准 浏览 器 的 解析 效果 是 一 致 的 ， 即 a 包含 元 素 内 的 元 素 根据 最 近 定位 包含 框 〈 窗 口 左上 角 ) 
， 进行 偏 移 ， 百 分 比 偏 移 大 小 〈509%) 也 是 根据 定位 包含 框 大 小 (窗口 大 小 ) 来 确定 的 。 但 是 ， 在 计算 
， 被 包含 元 素 自 身 大 小 时 ,JIE 6 与 标准 存在 很 大 的 差异 , IE 6 浏览 器 认为 被 包含 元 素 e 的 百分比 高 和 帘 
”应 该 根据 HTML 代码 中 包含 它 的 元 素 的 大 小 来 确定 ， 而 不 是 根据 它 的 最 近 定位 包含 框 来 确定 ， 因 此 
| c 元 素 显示 大 小 〈100px*100px) 就 为 a 元 素 显 示 大 小 (200px*200px) 的 一 半 。 

一 般 情况 下 ， 可 以 用 position 属性 来 定义 任意 定位 包含 杠 ，position 属性 有 效 取 值 包括 absolute、 
| fixed 和 relative。 

有 了 定位 包含 框 ， 就 可 以 灵活 设置 绝对 定位 的 坐标 原点 和 它 的 参考 值 。 绝 对 定位 打破 了 元 素 的 
固有 排列 顺序 ， 满 足 诸如 内 容 优 先 的 排版 需要 ， 也 给 复杂 的 浮动 布局 带 来 方便 。 


j ”9.4.3 ”相对 定位 


| 与 绝对 定位 不 同 的 是 ， 相 对 定位 元 素 的 偏 移 量 是 根据 它 在 正常 文档 流 里 的 原始 位 置 计算 的 ， 而 
] 绝对 定位 元 素 的 偏 移 量 是 根据 定位 包含 框 的 位 置 计算 的 。 一 个 绝对 定位 元 素 的 位 置 取决 于 它 的 偏 移 
| 量 top、right、bottom 和 left 属性 值 ， 相 对 定位 元 素 的 偏 移 量 与 绝对 定位 一 样 。 

| 【示例 】 在 本 示例 中 ， 定 义 strong 元 素 对 象 为 相对 定位 ， 然 后 通过 相对 定位 调整 标题 在 文档 顶部 
的 显示 。 代 码 如 下 ， 显 示 效 果 如 图 9.28 所 示 。 


<style type="text/css"> 
p { margin: 60px; font-slze: 14px:} 
p span { position: Telative: } 
p strong {/*[ 相 对 定位 ]*/ 
position: relative; 
left: 40px: top: -40px: 


a 
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font-slze: 18px: ] 
</style> : 7 
<p> <span><strong> 虞 美人 </strong> 南 唐 \ 宋 李煜 </span> <br> 春 花 秋月 何 时 了 ，<br> 往 事 知 多 少 ? <br> 小 
楼 昨夜 又 东风 ，<br> 故 国 不 堪 回 首 月 明 中 ! <br> 雕 栏 玉 砌 应 犹 在，<br> 只 是 朱 颜 改 。<br> 问 君 能 有 几 多 愁 ? 
<br> 恰 似 一 江 春 水 向 东 流 。 </p> 





关 其 
le HB http/ocalho.. ~- So 4 Se +H) | htp://localho... ~- BON 4 


处 美人 


处 美 人 南 唐宁 李煜 
春花 秋月 何 时 了 ， 
往事 知 多 少 ? 


南 唐 ' 宋 李煜 
春花 秋月 何 时 了 ， 
往事 知 多 少 ? 


小 楼 昨夜 又 东风 ， 
下 让 全 全 关中 ! 
全 二 未 站 急 应 犹 在 


问 看 能 有 几 多 开 悉 ? 
恰似 一 江 春 水 向 东 流 Yo 


| es 、 3 
二 下 民国 是 全 和 ! 
雕 栏 玉 


请 
问 君 能 有 几 多 笋 
恰似 一 ; 并 窒 水 向 东 流 Wn 





定位 前 定位 后 
图 9.28 相对 定位 显示 效果 
从 图 9.28 可 以 看 到 ， 相 对 定位 后 ， 元 素 对 象 的 原 空 间 保 留 不 变 。 相 对 定位 偏离 的 边 距 遵循 绝对 
定位 中 的 偏离 规则 ， 不 过 相对 定位 的 定位 包含 框 是 元 素 对 象 的 原 位 置 。 


低 ' 提示 : 相对 定位 元 素 遵循 的 是 流动 布局 模型 ， 存 在 于 正常 的 文档 流 中 ， 但 是 它 的 位 置 可 以 根据 
原 位 置 进行 偏 移 。 由 于 相对 定位 元 素 占有 自己 的 空间 ， 即 原始 位 置 保 留 不 变 ， 因 此 它 不 
会 挤占 其 他 元 素 的 位 置 ， 但 可 以 覆盖 在 其 他 元 素 之 上 进行 显示 。 


与 相对 定位 元 条 不同 ， 绝 对 定位 元 系 完 全 被 拖 离 正常 文档 流 中 原来 的 空间 ， 且 原来 空间 将 不 再 
保留 ， 而 是 被 相 邻 元 素 挤占 。 把 绝对 定位 元 素 设置 在 可 视 区 域 之 外 会 导致 浏览 器 窗口 的 滚动 条 出 现 。 
而 设置 相对 定位 元 素 在 可 视 区 域 之 外 ， 滚 动 条 是 不 会 出 现 的 。 


9.4.4 ”定位 层 苹 


定位 元 素 之 间 可 以 重 登 显示， 这 与 图 像 合成 类 似 ， 而 在 流动 布局 和 浮动 布局 中 是 无 法 实现 这 种 ， BE2 
重 登 效果 的 ， 因 此 利用 定位 重 登 技术 可 以 创建 动态 网 页 效果 。 

在 CSS 中 可 以 通过 z-index 属性 来 确定 定位 元 素 的 层 登 等 级 。 需 要 声明 的 是 ，z-index 属性 只 有 
在 元 素 的 position 属性 取 值 为 relative、absolute 或 fixed 时 才 可 以 使 用 。 其 中 fixed 属性 值 目前 还 没有 
得 到 IE 的 支持 。 

【示例 1) 在 本 示例 中 ， 定义 两 个 定位 元 素 ， 然 后 通过 z-index 属性 调整 它们 的 层 登 顺序 。 代 码 如 
下 ， 效 果 如 图 9.29 所 示 。 





A 


下 页 样式 与 市 局 从 入 门 到 精通 ( 微 课 精 编 版 ) 





] <style type="text/css"> 
#sub_1,#sub_2 {/* 定 义 子 元 素 绝对 定位 ， 并 设置 宽 和 高 */ 

: position: absolute; 

| width:200px; height:200px; 

} 

#sub_1 {/* 定 义 第 1 个 子 元 素 的 属性 */ 
z-index:10: /* 设 置 层 竺 等 级 为 10*/ 
left:SOpx; top:S5O0px; 
background:red: 

} 

#sub_ 2 {/* 定 义 第 2 个 子 元 素 的 属性 */ 
z-index:1; /* 设 置 层 疙 等 级 为 1*/ 
left:20px: top:20px; 
background:blue:; 

} 

</style> 

<div 1d="contain"> 

<div id="sub_1"> 元 素 1</div> 
<div id="sub 2"> 元 素 2</div> 
</div> 





所 sa S http://localhost/m 中 ~ BC | @ localhost 





图 9.29 层 闭 定位 显示 


z-index 属性 值 越 大 ， 层 肢 级 别 就 越 高 ， 如 果 属 性 值 相 同 ， 则 根据 结构 顺序 来 计算 层 鳃 级 别 。 对 
于 未 指定 此 属性 的 绝对 定位 元 素 ， 此 属性 的 number 值 为 正 数 的 元 素 会 在 其 之 上 ， 而 number 值 为 
负数 的 元 素 在 其 之 下 。 此 属性 仅仅 作用 于 position 属性 值 为 relative、absolute 或 fixed 的 元 素 。 

【示例 2】 如 果 z-index 属性 值 为 负 值 ， 则 将 隐藏 在 文档 流 的 下 面 。 在 本 示例 中 ， 定 义 <div> 标 签 
的 相对 定位 ， 并 设置 zindex 属性 值 为 -1， 显 示 效 果 如 图 9.30 所 示 。 


<!doctype html> 
<html> 


.294 . 


第 9 章 使 用 DIV+4CSS 设计 网 页 一 有 : 





<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
#boxl { 
height: 400px: /# 固定 高 度 */ 
position: relative: /# 相对 定位 */ 
background: red url(i1mages/1 .jpg); /# 定 义 背 景色 和 背景 图 */ 
z-index: -1; /# 层 著 顺序 */ 
top: -120px: /# 偏 移 位 置 ， 实 现 与 文本 重 营 显示 */ 
</style> 
</head> 
<body> 


<p> 我 永远 相信 只 要 永 不 放弃 ， 我 们 还 是 有 机 会 的 。 最 后 ， 我 们 还 是 坚信 一 点 ， 这 世界 上 只 要 有 梦想 ， 只 
要 不 断 努 力 ， 只 要 不 断 学习 ， 不 管 你 长 得 如 何 ， 不 管 是 这 样 ， 还 是 那样 ， 男 人 的 长 相 往往 和 他 的 才华 成 反比 。 
今天 很 残酷 ， 明 天 更 残酷 ， 后 天 很 美好 ， 但 绝 大 部 分 是 死 在 明天 晚上 ， 所 以 每 个 人 都 不 要 放弃 今天 。</p> 

<div 1d="box1"></div> 

</body> 

</html> 





i 
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图 9.30 ”定义 定位 元 素 显 示 在 文档 流下 面 
9.4.5 混合 定位 布局 


混合 定位 是 利用 相对 定位 的 流动 模型 优势 和 绝对 定位 的 层 布 局 优势 ， 实 现 网 页 定位 的 灵活 性 和 
精确 性 优势 互补 。 例 如 ， 如 果 给 父 元 素 定义 为 position:relative， 给 子 元 素 定 义 为 position:absolute， 那 
么 子 元 素 的 位 置 将 随 着 父 元 素 ， 而 不 是 随 着 整个 页 面 进行 变化 。 

【示例 】 本 示例 利用 混合 定位 布局 方法 ， 设 计 了 一 个 3 行 2 列 的 页 面 。 代 码 如 下 ， 效 果 如 图 9.31 
所 示 。 





2 








六 的 


<style type="text/css"> 

body {/* 定 义 窗 体 属 性 */ 
margin: 0; 
padding: 0; 
text-align: center; 

} 


ER 页 样式 与 布局 从 入 门 到 精通 ( 微 课 精 编 版 ) 


/# 清 除 正 默认 边 距 */ 
/# 清 除非 下 默认 边 距 */ 
/#* 设 置 在 正 浏览 器 中 居中 对 齐 */ 


#contain {* 定 义 父 元 素 为 相对 定位 ， 实 现 定位 包含 框 */ 


width: 100%: 
height: 310px: 


position: relative: 
background: #EO0EEEE:; 
margin: 0 auto; 


} 


/# 定 义 宽度 沁 / 

上 # 必 须 定义 父 元 素 的 高 度 ， 该 高 度 应 大 于 绝对 布局 的 最 大 高 度 ， 否 则 父 元 
素 背 景色 就 无 法 显示 ， 且 后 面 的 布局 区 域 也 会 无 法 正确 显示 */ 

旋 定 义 为 相对 定位 */ 


计 非 正 浏览 器 中 居中 显示 */ 


#header, #footer {/* 定 义 头 部 和 脚 部 区 域 属性 ， 以 默认 的 流动 模型 布局 */ 


width: 100%: 

height: S0pX: 
background: #COFE3E:; 
margin: 0 auto; 


} 


/# 非 正 浏 览 器 中 居中 显示 煌 


#sub_contain1 { ”定义 左 侧 子 元 素 为 绝对 定位 */ 


width: 30%: 

position: absolute: 

top: 0; 

left: 0: 

height: 300px: 

background: #E066FE:; 
} 


/# 根 据 定位 包含 框 定义 左 侧 栏目 的 宽度 关 / 
必定 义 子 栏目 为 绝对 定位 */ 

旋 在 定位 包含 框 顶 边 对 齐 */ 

访 在 定位 包含 框 左边 对 齐 */ 

此 定义 高 度 */ 


#sub_contain2 { /定义 右 侧 子 元 素 为 绝对 定位 */ 


width: 70%: 
position: absolute: 
top: 0; 
right: 0; 
height: 200px: 
background: #CDCDO0O:; 
} 
</style> 
<div id="header"> 标 题 栏 </div> 


虑 根 据 定位 包含 框 定义 右 侧 栏目 的 宽度 */ 
A* 定 义 子 栏目 为 绝对 定位 */ 

虑 在 定位 包含 框 顶 边 对 齐 */ 

/# 在 定位 包含 框 右边 对 齐 状 

话 定 义 高度 */ 


$a 





第 9 章 使 用 DIV+CSS 设计 网 页 SS 


<div 1d="contain"> 
<div 1d="sub_contain1"> 左 栏 </div> 
<div id="sub_contain2"> 右 栏 </div> 
</div> 
<div id="footer"> 页 脚 </div> 








图 9.31 混合 定位 演示 效果 


在 上 面 示例 中 ， 设 计 左 右 栏 为 绝对 定位 显示 ， 两 栏 包含 框 为 相对 定位 显示 ， 这 样 左 右 栏 就 以 包 
含 框 为 定位 参考 。 由 于 定位 包含 框 的 高 度 不 会 随 子 元 素 的 高 度 而 变化 ， 因 此 要 实现 合理 布局 ， 必 须 
给 父 元 系 定 义 一 个 明确 的 高 度 才 能 显示 包含 框 背景 ， 后 面 的 布局 元 素 也 才能 跟随 绝对 定位 元 素 之 后 
正常 显示 。 


95 案例 实战 


本 节 将 通过 多 个 案例 帮助 用 户 快 速 掌 握 网 页 布局 的 基本 方法 和 思路 ， 为 网 页 实战 砍 定 扎实 的 基 
础 。 所 有 案例 部 包含 5 个 模块 的 典型 标准 结构 ， 下 面 借助 这 个 结构 来 答 试 设计 不 同 的 版 式 效果 。 通 
过 这 种 方法 帮助 用 户 快速 掌握 多 种 布局 效果 的 设计 思路 和 实现 方法 ， 代 码 如 下 。 


<div 1d="container"> 
<div 1d="header"> 
<hl> 页 眉 区 域 <hl> 
</div> 
<div 1d="wrapper"> 
<div 1d="content"> 
<p><strong>1. 主 体内 容 区 域 </strong></p> 
</div> 
</div> 
<div 1d="navigation"> 
<p><strong>2. 导 航 栏 </strong></p> 
</div> 


人 





(sss1DI 网 页 样式 与 市 局 从 入 门 到 精通 【 币 旬 精 编 县 ) 





<div 1d="extra"> 
<p><strong>3. 其 他 栏目 </strong></p> 
</div> 
<div 1d="footer"> 
<p> 页 脚 区 域 </p> 
</div> 
</div> 


9.5.1 设计 固 宽 + 弹性 页 面 


本 案例 版 式 设 置 的 导航 栏 与 其 他 栏 并 为 一 列 固定 在 右 侧 ， 主 栏目 以 弹性 方式 显示 在 左 侧 ， 实 现 
主 栏目 适应 页 面 宽 度 变 化 ， 而 侧 栏 宽度 固定 不 变 的 版 式 效果 ， 如 图 9.32 所 示 。 








<div 1d="container"> 


页 眉 区 域 (%) 
导航 栏 (px) 


其 他 栏 (px) 


主 栏 区域 (%) 





页 肢 区 域 (%) 


</div> 


图 9.32 版 式 结构 示意 图 


如 果 完 全 使 用 浮动 布局 来 设计 主 栏 自 适应 、 侧 栏 固 定 的 版 式 是 存在 很 大 难度 的 ， 因 为 百分比 取 
值 是 一 个 不 固定 的 宽度 ， 让 一 个 不 固定 宽度 的 栏目 与 一 个 固定 宽度 的 栏目 同时 浮动 在 一 行内 ， 采 用 
简单 的 方法 是 不 行 的 。 

这 里 设计 主 栏 为 100% 宽 度 ， 然 后 通过 左 外 边 距 取 负 值 强迫 栏目 偏 移出 一 列 的 空间 ， 最 后 把 这 个 
腾 出 的 区 域 让 给 右 侧 浮动 的 侧 栏 ， 从 而 达到 并 列 浮动 显示 的 目的 。 

当主 栏 左 外 边 距 取 负 值 时 ， 可 能 部 分 栏目 内 容 显示 在 窗口 外 面 ， 为 此 在 骨 套 的 子 元 素 中 设置 左 
外 边 距 为 父 包 含 框 的 左 外 边 距 的 负 值 ， 这 样 就 可 以 把 主 栏 内 容 控制 在 浏览 器 的 显示 区 域 了 。 

本 示例 的 样式 代码 如 下 ， 设 计 效 果 如 图 9.33 所 示 。 


div#wrapper {/* 主 栏 外 框 */ 


div#navigation {/* 导航 栏 */ 


float:left: 谍 回 左 浮动 */ 

width:100%46: /#* 弹性 宽度 */ 
margin-left:-200px 此 左 侧 外 边 距 ， 负 值 向 左 缩 进 */ 
' } 

| div#content {/* 主 栏 内 框 */ 

margin-left:200px 谍 左 侧 外 边 距 ， 正 值 填充 缩 进 */ 
} 


“aun 





float:right; 
width:200px 

} 

div#extra {/* 其 他 栏 */ 
float:right; 
clear:right:; 
width:200px 

} 

div#footer {/* 页 眉 区 域 */ 
clear:both; 
width:100% 


Ee sl 全 http://localhost/mysite/test html Pr Bo 


页 蛋 区 域 


1. 主 体内 容 区 域 


第 日 章 使 用 DIV+4CSS 设计 网 页 


上 # 回 右 浮 动 */ 
/# 固定 宽度 */ 





上 # 问 右 浮 动 */ 
上 # 清除 右 侧 浮动 ， 避 免 同 行 显示 */ 
上 # 固定 宽度 */ 


/* 清除 两 侧 浮动 ， 强 迫 外 框 撑 起 */ 
/* 宽度 */ 


总 localhost 





min-height right clip top display width Overfiow-y left z-index left min-height z-index visibility top overflow overflow max-width 
height overflow visibility float overfiow-y overfiow-x visibility mavc-width clip z-index bottom max-width bottom height 


z-index visibty position max-height width clear width botiom max-height overfiow position clip position max-height min-height 
top visibility pos 市 on left nght clear clear visibaity float overflow-y overfiow-y posmon float overflow-x max-width max-width 
overflow-x clip width display left top z-index visibility overflow-x visibilitty max-height max-width chp width left left top Overflow 
cllp left overtiow-x clp height overfiow clip height max-height overftlow 


mavc-width min-height top clip let 
Overflow-x bottom overflow-y 
Overfow max-width 

Overflow-y 





图 9.33 设计 固 宽 + 自 适应 两 栏 页 面 
9.5.2 设计 两 栏 弹性 页 面 


在 两 栏 浮动 版 式 中 ， 如 果 设 置 两 列 宽度 部 为 自 适 应 ， 那 么 设置 起 来 会 容易 得 多 。 例 如 ， 定 义 两 
栏 版 式 中 主 栏 同 左 浮 动 ， 宽 度 为 70%， 导 航 栏 同 右 浮 动 ， 宽 度 为 29.9%， 代 码 如 下 。 





divi#wrapper { 
float:left: 诺 回 左 浮动 */ | 
width:70% 六 百分比 宽度 所 

} 

divi#navigation { 
float:right; 谍 回 右 浮 动 */ | 
width:29.9% 话 百分比 宽度 *#/ : 


} | 
diviextra { 


i 


下 网 页 样式 与 市 局 从 入 门 到 精通 ( 微 课 精 编 版 ) 





clear:both: /#* 清除 左右 浮动 */ 
width:100% /*# 满 屏 显 示 */ 


| 


下 面 的 示例 将 设计 一 个 更 精确 的 两 栏 浮动 且 目 适应 宽度 的 版 式 。 
本 案例 版 式 设 置 的 导航 栏 与 其 他 栏目 并 为 一 列 固 定 在 右 侧 ， 主 栏目 以 弹性 方式 显示 在 左 侧 ， 实 
现 主 栏目 适应 页 面 宽 度 变 化 ， 而 侧 栏 宽度 固定 不 变 的 版 式 效果 ， 如 图 9.34 所 示 。 





<div 1d="contaimer'"> 


主 栏 区 域 (%) 


</div> 





图 9.34 版 式 结构 示意 图 
设计 的 方法 也 是 采用 负 外 边 距 来 进行 调节 ， 核 心 样式 如 下 ， 详 细 代 码 请 参阅 本 书 实例 。 


div#wrapper {/* 主 栏 外 框 */ 


float:right: 诺 回 右 浮 动 */ 
width:1009%4: 请 弹性 宽度 4/ 
margin-right:-33%; 谍 右 侧 外 边 距 ， 负 值 向 右 缩 进 */ 
} 
div#content {/* 主 栏 内 框 */ 
margin-right:33%; 谍 右 侧 外 边 距 ， 正 值 填充 缩 进 */ 
} 
div#navigation {/* 导航 栏 */ 
float:left: /* 回 右 浮 动 */ 
\ width:32.9%; /#* 固定 宽度 */ 
div#extra {/* 其 他 栏 */ 
\ float:left: /# 同 左 浮动 */ 
: clear-left; /*# 清除 左 侧 浮动 ， 避 免 同 行 显示 */ 
width:32.9% /#* 固定 宽度 */ 
| } 
div#footer {/* 页 眉 区 域 */ 
: clear:both; 庆 清除 两 侧 浮动 ， 强 迫 外 框 撑 起 */ 
: width:100% /# 宽度 *#/ 
} 


* 300。 
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为 了 避免 在 正 7 或 者 其 他 标准 浏览 器 窗口 中 出 现 y 轴 滚 动 条 ， 可 以 为 body 元 素 增加 
overflow-x:hidden: 声 明 隐 藏 该 滚动 条 。 代 码 如 下 ， 最 后 所 设计 的 效果 如 图 9.35 所 示 。 


body { overflow-x:hidden:} 
< 


页 蛋 区 域 


1 主体 内 容 区 域 

min-heioht right clip top display width overflow-y left z-index lefl min-height z-index visbiity lop overflow overflow max-width 

height Overffow visibility OverflOW-y overflow-x visibility mavc-widih cmp z-index bottom mavt-widih bollom height 
oe ta 





width botiom max-height overfiow position cliip 


z-index visibllty posilon max-helght 
top visibility position left right clear cam wily fan eve row-y overfiow-y pos tion float overfiow-x 

z-index visibility overflow-x east max- eprint 
cip 


overflow-x clip widih display left top z 
leW overfiow-x clip height OverTiow height max-height ov 





图 9.35 设计 两 栏 宽度 自 适 应 页 面 


9.5.3 ”设计 两 栏 浮 动 页 面 

上 面 两 节 分 别 采 用 不 同 的 设计 思路 来 设计 两 栏 浮动 版 式 ， 下 面 介绍 如 何 使 用 另 一 种 思维 来 设计 
两 栏 浮 动 版 式 。 整 个 版 式 设置 导航 栏 固 定 在 左 侧 ， 主 栏目 以 弹性 方式 显示 在 右 侧 ， 以 实现 主 栏 自 适 
应 页 面 宽 度 变化 ， 而 其 他 栏目 与 页 脚 区 域 显 示 底 部 的 版 式 效果 ， 如 图 9.36 所 示 。 


<div 1d="container"> 
页 眉 区 域 (%) 


其 他 栏 (%) 


页 脚 区 域 (%) 





</div> 


图 9.36 版 式 结构 示意 图 


设计 的 方法 是 : 让 主 栏 (<div id="wrapper">) 满 屏 显示 ， 即 取 值 为 100%， 然 后 设置 其 包含 的 子 
元 了 〈<div id="content">) 左 侧 外 边 距 为 200 像素 ， 预 留 出 一 块 区 域 。 最 后 定义 导航 栏 (<div 
id="navigation">) 取 值 为 -100%, 也 就 是 强制 其 从 右 侧 的 窗口 外 边 移动 到 主 栏 左 侧 的 了 预 留 区 域内 显示 。 


所 设计 版 式 的 核心 代码 如 下 ， 预 览 效 果 如 图 9.37 所 示 。 
div#wrapper {/* 主 栏 外 包含 框 */ 
/# 疝 左 浮动 */ 


float:left: 
width:100% /* 满 屏 宽度 */ 


“Jl 
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div#content {/* 主 栏 内 包含 框 */ 


} 


margin-left:200px 


/# 左 侧 外 边 距 ， 预 留 空间 */ 


div#navigation {/* 导航 栏 */ 


} 


float:left: 
width:200px: /* 固定 
margin-left:-100% /* 


div#extra {/* 其 他 栏 */ 


9.5.4 
本 案例 通过 浮动 布局 的 方法 ， 以 百分比 为 单位 来 设置 栏目 的 宽度 ， 版 式 结构 示意 图 如 图 9.38 


所 示 。 


clear:left: 


width:100% 


/# 回 左 浮动 */ 
宽度 ， 保 持 与 主 栏 左 侧 预 留 区 域 的 宽度 一 致 */ 
通过 取 左 外 边 距 负 值 ， 同 左 强制 移动 到 主 栏 左 侧 的 预 留 区 域 */ 


/# 清除 左右 浮动 */ 
/#* 固定 宽度 */ 


Ee CT 
页 眉 区 域 








1. 主 体内 容 区 域 


overfiow position overfiow right foat clip max-height z-index posiion top left z-index bottom min-height height width z-index 
mavc-width clear clip max-height overfiow-y bottom display float overflow bottom min-height fioat display min-height clear ma 
height overflow-x display cllp float width right clip width max-height visibilty clear left overflow-y mmax-helght z-index right 
bottom display bottom right float right width z-index fight left display clear max-height clip bottom overflow-x z-index 


次 加 十 这 物 


图 9.37 设计 双 浮 动 兼容 页 面 


设计 三 栏 弹 性 页 面 


<div 1d="container"> 





</div> 





图 9.38 三 列 弹 性 版 式 结构 示意 图 


S02 
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本 案例 采用 负 外 边 距 的 方法 来 进行 设计 ， 这 里 设计 三 列 都 同 左 浮动 ， 然 后 通过 负 外 边 距 来 定位 
每 列 的 显示 位 置 ， 布 局 示意 图 如 图 9.39 所 示 。 








margin-lett:-100% 
<— Width:25% 
<div 1d="container"> 


页 眉 区 域 (%) 


| | 
导航 栏 (%) 主 栏 区 域 (%) 其 他 栏 J 人 | 其 他 栏 (本 ) | 
|| | 


页 脚 区 域 

















(%) 
其 他 栏 ( 原 ) 三 浮动 错位 


rr 


图 9.39 三 列 弹 性 版 式 布局 示意 图 


注意 ， 由 于 其 他 栏目 在 不 受 外 界 干 扰 的 情况 下 会 浮动 在 导航 栏 的 右 侧 ， 但 是 并 列 浮动 的 总 宽度 
超出 了 窗口 宽度 ， 因 此 会 发 生 错位 现象 。 而 在 没有 负 外 边 距 的 影响 下 ， 则 会 显示 在 第 2 行 的 位 置 ， 
通过 外 边 距 取 负 值 ， 强 迫 它们 显示 在 主 栏 区 域 的 上 面 。 核 心 样式 如 下 。 


div#wrapper { /* 主 栏 外 包含 框 基本 样式 */ 


float:left: /# 回 左 浮动 */ 
width:100% /# 百分比 宽度 */ 
} \ 
div#content {/* 主 栏 内 包含 框 基本 样式 */ 
margin: 0 25% 上 # 在 左右 两 侧 预 留 侧 栏 空间 */ 
div#navigation {/* 导航 栏 基本 样式 */ s 
float:left: /# 回 左 浮动 */ : 
width:25%: /# 百分比 宽度 */ 
margin-left:-100% 上 # 左 外 边 距 取 负 值 进行 定位 */ : 
div#extra {/* 其 他 栏 基 本 样式 */ 
float:left: /# 问 左 浮动 */ : 
width:25%: /# 百分比 宽度 */ 
margin-left:-25% 诺 左 外 边 距 取 负 值 进行 定位 */ 
} z 
div#footer {/* 页 脚 包含 框 样式 */ 
clear:left: /#* 清除 左右 浮动 */ | 
width:100% /#* 百分比 宽度 */ | 
} | 


303 











% 
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三 列 弹性 布局 的 版 式 设 计 效 果 如 图 9.40 所 示 。 


YS http://localhost/mysite/test.html Pr Bd E localhos 


显示 如 图 9.41 所 示 的 效果 。 








1. 主 体内 容 区 域 
clear min-height left right 2-index display clear width clip width clear max-width 


OV' 
z-index clip height float 

z-index overflow-x Overilow-y max-width max-widih right display float pos 市 on 
visibility max-heioht bottom top bottom display height display height max-width 
overflow max-height overflow overilow float width visibility min-height 


width clear right overflow top clear top max-height 


谊 加 垣 充 槐 


图 9.40 三 列 弹性 版 式 的 布局 效果 (一) 


以 同样 的 设计 方法 ， 如 果 设 置 侧 栏 负 边 距 为 其 他 值 ， 则 可 以 设置 不 同 的 版 式 效果 。 例 如 ， 在 上 
和 面 示例 的 基础 上 ， 设 置 主 栏 右 侧 外 边 距 为 50%， 定 义 导航 栏 左 外 边 距 负 值 为 -50%， 代 码 如 下 ， 则 会 


div#content {/* 主 栏 内 包含 框 基本 样式 */ 


margin-right: $0% 
} 


/# 右 侧 外 边 距 */ 


div#navigation {/* 导航 栏 包含 框 样式 */ 


float:left: 

width:25%: 

margin-left:-50% 
和 


页 眉 区 域 


1. 主 体内 容 区 域 


/# 问 左 浮动 */ 
/# 百分比 宽度 */ 
/# 左 侧 负 边 距 */ 





clear top width right overflow-y z-index height right clear z-index Overfiow-y 
visibility max-height nght overflow-x z-index width overflow-y max-width 
posiion position bottom overflow-y overflow-y min-helght bottom right max- 


height position z-index posiion 


摊 吉 填充 扫 





图 9.41 三 列 弹 性 版 式 的 布局 效果 (二) 


.304 . 
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同样 的 道理 ， 如 果 稍 稍 改变 这 几 个 包含 框 的 外 边 距 ， 会 发 现 网 页 版 式 又 发 生 了 新 的 变化 。 例 如 ， 
把 主 栏 包含 框 的 左 外 边 距 设置 为 50%， 通 过 负 外 边 距 让 导航 栏 包 含 框 同 左 移动 75% 的 距离 ， 而 让 其 





他 栏目 移动 100% 的 距离 ， 代 码 如 下 ， 则 会 显示 如 图 9.42 所 示 的 效果 。 . 
div#content {/* 主 栏 内 包含 框 的 基本 样式 */ 
margin-left: 50% 诺 左 侧 外 边 距 */ 
} 
div#navigation {/* 导航 栏 包含 框 的 基本 样式 */ 
float:left: /# 问 左 浮 动 */ 
width:25%: /#* 百分比 宽度 *#/ 
margin-left:-75% 诺 左 侧 负 边 距 */ 
} 
div#extra {/* 其 他 栏 包 含 框 的 基本 样式 */ 
float:left: /# 回 左 浮 动 */ 
width:25940: /# 百分比 宽度 4/ 
margin-left:-100% 诺 左 侧 负 边 距 */ 
} 


3 = ES hitp://localhost/mysite/test1.html Dr a 


页 眉 区 域 


1. 主 体内 容 区 域 


overflow-x right clear pos 市 on clip display float right clear height display left 
overflow-y min-height heighit width position z-index position position z-index 
clear right right overfiow display overiiow-y floai top right width overflow-y float 
clip display top min-height width visibihty left overflow-x clear top z-index 
bottom dlip overflow clip max-height visibility bottom clip left height clear max- 
width 





图 9.42 三 列 弹性 版 式 的 布局 效果 (三 ) 
9.5.5 ”设计 两 列 固 宽 + 单列 弹性 页 面 Ee 


单纯 的 弹性 或 者 固定 版 式 布局 相对 来 说 都 比较 好 控制 ， 但 是 如 果 要 设计 一 列 弹性 、 另 两 列 固定 。sr 
的 版 式 就 比较 麻烦 。 不 过 灵活 使 用 负 外 边 距 在 网 页 布局 中 的 技巧 ， 可 以 解决 类 似 复杂 的 布局 。 

本 案例 网 页 继续 沿用 上 一 节 的 模板 示例 结构 ， 通 过 浮动 布局 的 方法 ， 以 百分比 和 像素 为 单位 来 
设置 栏目 的 宽度 ， 版 式 结构 示意 图 如 图 9.43 所 示 。 


和 人 





<div 1d="container"> 





页 脚 区 域 (%) 


</div> 











其 他 栏 (px) 


图 9.43 一 列 弹性 两 列 固定 版 式 结构 示意 图 


要 定义 导航 栏 和 其 他 栏 宽 度 固 定 ， 不 妨 选 用 像素 为 单位 ， 对 于 主 栏 则 可 以 采用 特 分 比 单位 ， 然 
后 通过 负 外 边 距 来 定位 每 列 的 显示 位 置 。 布 局 示意 图 如 图 9.44 所 示 。 





maregin-left:-100% 





<div 1d="container"> 








页 眉 区 域 (%) 









width:200px 






图 9.44 一 列 弹性 两 列 固定 版 式 布局 示意 图 


注意 ， 由 于 其 他 栏目 在 不 受 外 界 干 扰 的 情况 下 会 浮动 在 导航 栏 的 右 侧 ， 但 是 如 果 并 列 序 动 的 总 
宽度 超出 了 窗口 宽度 ， 就 会 发 生 错位 现象 。 而 在 没有 负 外 边 距 的 影响 下 ， 则 会 显示 在 第 2 行 的 位 置 ， 
通过 外 边 距 取 负 值 ， 强 迫 它们 显示 在 主 栏 区 域 的 上 和 面 。 核 心 样式 如 下 。 


div#wrapper { /* 主 栏 外 包含 框 基本 样式 */ 


float:left: 
width:100% 

} 

div#content {/* 主 栏 内 包含 框 基本 样式 */ 
margin: 0 200px 

} 

div#navigation {/* 导航 栏 基本 样式 */ 
float:left: 
width:200px: 


margin-left:-100% 


* 306。 


此 问 左 浮动 */ 
/# 百分比 宽度 */ 


上 # 在 左右 两 侧 预 留 侧 栏 空间 */ 


/# 向 左 浮动 */ 
/* 固定 宽度 */ 
/# 左 外 边 距 取 负 值 进行 定位 */ 
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} 
div#extra {/* 其 他 栏 基本 样式 */ 
float:left: 话 同 左 浮动 */ 
width:200px: /# 固定 宽度 */ 
margin-left:-200px 谍 左 外 边 距 取 负 值 进行 定位 */ 
} 


一 列 弹性 两 列 固定 版 式 的 布局 效果 如 图 9.45 所 示 。 


z-index botiom overflow-y overflow-x min-height overflow-x position bottom z-index top clear chip position 
max-height height visibility float min-height display clear overflow-x overflow-x max-width right position 


height clip max-widih position position width posiiion overflow max-widih float nght position clip right max- 
height float overflow-¥ Overflow-y max-width width min-height lefl clear Overfiow-y clear max-height 
overtlow width clip min-height top min-heloht 


增加 填充 物 





图 9.45 设计 一 列 弹性 两 列 固定 版 式 的 布局 效果 (一) 


利用 上 面 的 设计 技巧 ， 也 可 以 设计 很 多 类 似 的 版 式 效 果 。 例 如 ， 分 别 调整 人 出 栏 和 主 栏 的 外 边 距 
取 值 ， 代 码 如 下 ， 效 果 如 图 9.46 所 示 。 


div#content { /* 主 栏 外 包含 框 基本 样式 */ 


margin-right: 400px /* 通过 左右 外 边 距 预 留 侧 栏 空间 */ 
} 
divinavigation {/* 导航 栏 基 本 样式 */ 
margin-left:-200px 诺 左 外 边 距 取 负 值 进行 精确 定位 */ 
} 
div#extra {/* 其 他 栏 基本 样式 */ 
margin-left:-400px 诺 左 外 边 距 取 负 值 进 行 精确 定位 */ 
} 


“0 





、 = EE httpy/localhostbmysite/testl.html PD7 Bollocalhost 


页 眉 区 域 


1. 主 体内 座 区 域 


top min-height right display height right cip visibility top overflow top right max-height max-width z-index 
position overfilow-x min-height overflow overfiow-x clip visibility display overilow min-height min-height top 
position overflow min-height clear overflov clip min-height clip overflow overfiow overfiow lefl clear float 
Overniow-y clip overflow-y min-height right overflow-y visibility top z-index min-height lefl clear clip right 
z-index max-width clear display right nght posiion right top nght cip z-index bottom botiom min-heighi 
z-index float float 


pusilivr vver how ra- riogiol ra-l iyi wiih ieightl widlh mal iop za Lup heihi nin-lneighl wean fl 
position position clear Widih overflovw-x float z-index right float max-width overflow-y width olip overllow-x 
clear z-index z-index max-height z-index right min-height left right position visibility visibility max-height 
overfilow-x botiom clear float clip position display min-height overflow-x bottom min-height width overflow 
right max-height display max-width overfilow bottom right clip 


益 加 填充 物 





图 9.46 设计 一 列 弹性 两 列 固定 版 式 的 布局 效果 (二) 


9.5.6 ”设计 两 列 弹 性 + 单列 固定 页 面 


与 一 列 弹性 两 列 固 定 版 式 相 比 ， 两 列 弹性 一 列 固定 版 式 似 乎 显得 多 余 ， 不 过 当 设 计 一 个 双 主 题 
的 页 面 或 者 两 列 栏目 都 很 重要 的 页 面 时 ,使 用 两 列 弹性 一 列 固定 版 式 进行 布局 会 让 页 面 更 具 灵 活性 。 
在 设计 思路 上 两 列 弹性 一 列 固 定 版 式 与 一 列 弹性 两 列 固定 版 式 大 同 小 异 ， 相 信 通 过 这 样 单独 的 分 解 ， 
更 能 够 引起 您 的 重视 和 思考 。 

本 案例 的 基本 思路 : 首先 定义 主 栏 外 包含 框 宽度 为 100%， 即 占据 整个 窗口 。 然 后 通过 左右 外 边 
距 来 定义 两 侧 空白 区 域 ， 预 留 给 侧 栏 占用 。 在 设计 外 边 距 时 ， 一 侧 采用 百分比 单位 ， 另 一 侧 采 用 像 
素 为 单位 ， 这 样 就 可 以 设计 出 两 列 宽度 是 弹性 的 、 另 一 列 是 固定 的 。 最 后 通过 负 外 边 距 来 定位 侧 栏 
的 显示 位 置 。 代 码 如 下 ， 设 计 效 果 如 图 9.47 所 示 。 


div#wrapper {/* 主 栏 外 包含 框 基本 样式 */ 
float:left: /# 回 左 浮动 */ 
width:100% /* 百分比 宽度 */ 
} 
div#content {/* 主 栏 内 包含 框 基本 样式 */ 
margin: 0 33% 0 200px /* 定义 左右 两 侧 外 边 距 ， 注 意 不 同 的 取 值 单位 */ 
} 
div#navigation {/* 导航 栏 包含 框 基本 样式 */ 
float:left: /# 问 左 浮 动 */ 
width:200px: /# 固定 宽度 */ 
margin-left:-100% 诺 左 外 边 距 取 负 值 进行 精确 定位 */ 
3 
div#extra {/* 其 他 栏 包含 框 基本 样式 */ 
float:left: 谍 问 左 浮动 */ 


本 
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width:33%; /* 百分比 宽度 */ 
margin-left:-33% 席 左 外 边 距 取 负 值 进行 精确 定位 */ 
} 





roo Pp-aoleooms | 
页 眉 区 域 


1. 主 体内 容 区 域 


left visibility display min-height top z-index float visibility left height overflow-x z-index width float a 
Widih overfiow lef height visibility overflow-x overflow-y left float right max-width visibility display Rr 
display overflow-x top overflow-x clip overflow-x height max-height min-height min-height min- i 0 
height min-height right visibility top position overflow-x right clip foat left overflow right float 

height 


top Overflow-y float right max-height width top max-height bottom max-width right overtlow-y 


widlll righl vv er Mow-x vver ow-y riyht Wop Inax-widUlh Noul uve fow-Yy Iax-widUh visibilily <c-index 
top visibility foat rght width dear z-index width min-height left with min-height 





图 9.47 设计 两 列 弹性 一 列 固定 版 式 的 布局 效果 (一) 


也 可 以 让 主 栏 取 负 外 边 距 进行 定位 ， 其 他 栏目 然 浮动 。 例 如 ， 修 改 其 中 的 核心 代码 ， 让 主 栏 外 
包含 框 同 左 取 负 值 ， 偏 移 23% 的 宽度 ， 也 就 是 隐藏 主 栏 外 框 左 侧 25% 的 宽度 ， 然 后 通过 内 框 来 调整 
包含 内 容 的 显示 位 置 ， 使 其 显示 在 窗口 内 ， 最 后 定义 导航 栏 列 左 外 边 距 取 负 值 ， 履 再 在 主 栏 的 右 侧 
外 边 距 区 域 上 ， 其 他 栏目 自然 浮动 在 主 栏 右 侧 即 可 。 核 心 代码 如 下 。 


div#wrapper {/* 主 栏 外 包含 框 基本 样式 */ 


margin-left:-25% 放 左 外 边 距 取 负 值 进行 精确 定位 */ 
} 
div#content {/* 主 栏 内 包含 框 基本 样式 */ 

margin: 0 200px 0 25% 谍 定义 左右 两 侧 外 边 距 ， 注 意 不 同 的 取 值 单位 */ 
} 
div#navigation {/* 导航 栏 包含 框 基本 样式 */ 

margin-left:-200px 席 左 外 边 距 取 负 值 进行 精确 定位 */ 
} 
div#extra {/* 其 他 栏 包含 框 基本 样式 */ 

width:25% 百分比 宽度 */ 
} 


显示 效果 如 图 9.48 所 示 ， 其 中 中 间 导 航 栏 的 宽度 是 固定 的 ， 主 栏 和 其 他 栏 为 弹性 宽度 显示 。 
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全 EE http://localhost/mysite/test1.html 


页 眉 区 域 


1 主体 内 容 区 拭 


bottom width width max-height top min-height Overfiow-x left overfilow-y visibility z-index min- 
height position min-height min-heioht widih overflow clip cip posaion mavc-height heioht right cip 
width left left display right clear overflow-y widih z-index min-hesght top top overfow-y max-width 
overfiow-y max-height display top position clip clip max-width min-height width clip max-helght 
left min-height max-width dear position right display posiion overflow Overflow-x width Visib 证 ty 
cip Gsplay width overilow-y min-height min-height max-width nght cip left height visibaity clear 
rioht 

min-heioght heighit Ief ioat width overfiow-x may-height z-index overflow-y z-index z-index height 
max-height float overfiow max-widih display 2-index left foat max-heioht display lefl min-height 
z-index top min-height z-index width overflow min-height right overflow overfiow-x max-width 
height visibiRy visibilty display top right clip max-height left z-index top foal widm posWon max- 





height float width overilow-x height top max-wWidth max-height clear overilow pos 击 on min-height 
right position clip max-helght clear height foal overflow visibility right right 





图 9.48 设计 两 列 弹性 一 列 固 定 版 式 的 布局 效果 (二) 


96 在 线 练 习 


本 节 分 多 个 专题 练习 CSS3 的 布局 方法 、 特 性 和 应 用 技巧 。 感 兴趣 的 读者 可 以 扫 码 练习 。 
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章 


使 用 HTML5+CSS3 设计 网 页 


HTMLS 全 面 升 级 了 文档 结构 的 标识 元 素 ， 确 保 文档 结构 更 加 清晰 明确 ， 容 易 阅 读 。 本 
章 将 详细 介绍 这 些 新 增 的 结构 元 素 ， 同 时 介绍 如 何 使 用 CSS 控制 这 些 标签 ， 以 设计 漂亮 的 
页 面 版 式 。 


【 学 习 要 点 】 

P| 正确 使 用 HTML 结构 标签 。 

| 正确 使 用 HTMLS 语义 元 素 。 
MI 能 够 设计 符合 标准 的 网 页 结构 。 


本 网 页 样式 与 布局 从 入 门 到 精通 ( 微 课 精 编 版 ) 





10.1 _HTMLS 文档 基础 


HTMLS5 以 HTML4 为 基础 ， 并 对 HTML4 进行 了 全 面 升级 。 与 HTML4 相 比 ，HITMLS 在 语法 上 
有 很 大 的 变化 。 同 时 为 了 使 文档 的 结构 更 加 清晰 、 明 确 ，HTMLS 新 增 了 与 页 眉 、 页 脚 、 内 容 块 等 文 
档 结构 相关 联 的 结构 元 素 。 


10.1.1 文档 变化 


1. 内 容 类 型 

HIMLS 的 文件 扩展 名 和 内 容 类 型 保持 不 变 。 例 如 ， 扩 展 名 仍然 为 .html 或 .htm， 内 容 类 型 
(ContentType) 仍然 为 text/html。 

2. 文档 类 型 

在 HIML4 中 ， 文 档 类 型 的 声明 方法 如 下 。 








<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/ 
: xhtmll-transltional.dtd"> 


在 HIML5S 中 ， 文 档 类 型 的 声明 方法 如 下 。 
<!DOCTYPE html> 

当 使 用 工具 时 ， 也 可 以 在 DOCTYPE 声明 中 加 入 SYSTEM 识别 符 ， 声 明 方 法 如 下 。 
<!DOCTYPE HTML SYSTEM "about:legacy-compat"> 

在 HTML5 中 ，DOCTYPE 声明 方式 是 不 区 分 大 小 写 的 ， 引 号 也 不 区 分 是 单 引号 还 是 双 引 号 。 


< 轴 注意 : 使 用 HTML5 的 DOCTYPE 会 触发 浏览 器 以 标准 模式 显示 页 面 。 众 所 周知 ， 网 页 都 有 多 
种 显示 模式 ， 如 怪异 模式 (Quirks ) 、 标 准 模式 ( Standards ) ,浏览 器 根据 DOCTYPE 
来 识别 该 使 用 哪 种 解析 模式 。 


3. 字符 编码 
在 HIML4 中 ， 使 用 meta 元 素 定 义 文档 的 字符 编码 ， 代 码 如 下 。 


<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
在 HTMLS 中 , 继续 沿用 meta 元 系 定 义 文档 的 字符 编码 , 但 是 简化 了 charset 属性 的 写法 , 代码 如 下 。 
<meta charset="UTF-8"> 


对 于 HTMLS5 来 说 ， 上 述 两 种 方法 都 有 效 ， 用 户 可 以 继续 使 用 前 面 一 种 方法 ， 即 通过 content 元 
素 的 属性 来 指定 。 但 是 不 能 混用 两 种 方法 。 
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所 负 注意 : 在 传统 网 站 中 ， 可 能 会 存在 下 面 这 种 标记 方式 。 在 HTML5 中 ， 以 下 字符 编码 方式 被 认 
为 是 错误 的 。 
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html:charset=UTF-8"> 


从 HIMLS 开始 ， 对 于 文件 的 字符 编码 ， 推 荐 使 用 UTF-8。 


10.1.2 标签 用 法 
HTMLS 语法 是 为 了 保证 与 之 前 的 HTML4 语法 达到 最 大 程度 的 兼容 而 设计 的 ， 简 单 说 明 如 下 。 
1. 标记 省 略 


在 HIMLS 中 ， 元 素 的 标记 可 以 分 为 3 种 类 型 : 不 允许 写 结束 标记 、 可 以 省 略 结束 标记 、 开 始 标 
记 和 结束 标记 全 部 可 以 省 略 。 下 面 简单 介绍 这 3 种 类 型 各 包括 哪些 HIMLS 新 元 素 。 
加 ”不 允许 写 结束 标记 的 元 素 : area、base、br、col、command、embed、hr、img、input、keygen、 





lnk、 meta、param、source、track、wbr。 

四 可 以 省 略 结束 标记 的 元 素 : i、 dt、 dd、 p、rt、 mp、optgroup、option、colgroup、thead、tbody、 
tioot、 女 、 包 、 也 。 

回 可 以 省 略 全 部 标记 的 元 素 : html、head、body、colgroup、tbody。 


写 ” 提 示 : 不 允许 写 结 束 标 记 的 元 素 是 指 ， 不 允许 使 用 开始 标记 与 结束 标记 将 元 素 括 起 来 的 形式 ， 
只 允许 使 用 < 元 素 /> 的 形式 进行 书写 。 例 如 : 
加 ”错误 的 书写 方式 如 下 。 
<br></br> 


加 正确 的 书写 方式 如 下 。 


<br/> 


在 HTMLS5 之 前 的 版 本 中 ，<br> 这 种 写法 可 以 继续 沿用 。 
可 以 省 略 全 部 标记 的 元 素 是 指 元 素 可 以 完全 被 省 略 。 注 意 ， 该 元 素 还 是 以 隐 式 的 方式 存在 的 。 
例如 ， 省 略 body 元 素 时 ，baby 元 素 在 文档 结构 中 还 是 存在 的 ， 可 以 使 用 document.body 进行 访问 。 


2. 布尔 值 


对 于 布尔 型 的 属性 , 如 disabled 与 readonly 等 , 当 只 写 属性 而 不 指定 属性 值 时 ,表示 属性 值 为 true; 
如 果 属 性 值 为 false， 可 以 不 使 用 该 属性 。 另 外 ， 要 想 将 属性 值 设 定 为 tue 时， 也 可 以 将 属性 名 设 定 
为 属性 值 ， 或 将 空 字 符 串 设 定 为 属性 值 。 

下 面 是 几 种 正确 的 书写 方法 。 


<!-- 只 写 属性 ， 不 写 属性 值 ， 代 表 属 性 为 true--> 
<Inpnut type="checkbox" checked> 
<!-- 不 写 属性 ， 代 表 属 性 为 false--> 


和 
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<Inpnut type="checkbox"> 
<!-- 属 性 值 = 属性 名 ， 代 表 属 性 为 tue--> 
<Inpnut type="checkbox" checked="checked"> 
<!-- 属 性 值 = 空 字符 串 ， 代 表 属 性 为 true--> 
<input type="checkbox" checked=""> 


3. 属性 值 


属性 值 可 以 加 双 引 号 ， 也 可 以 加 单 引 号 。HTMLS 在 此 基础 上 做 了 一 些 改进 ， 当 属性 值 不 包括 空 
字符 串 、<、>、=、 单 引号 、 双 引号 等 字符 时 ， 属 性 值 两 边 的 引号 可 以 省 略 。 
以 下 写法 都 是 合法 的 。 


<input type="text"> 
<input type='text> 
<input type=text> 


10.1.3 ”编写 HTML5 文档 


目前 最 新 主流 浏览 器 对 HIMLS 都 提供 了 很 好 的 支持 ， 下 面 结 合 示例 介绍 如 何 正 确 创建 HTMLS5 文档 。 

本 例文 档 省 略 了 <html>、<head>、<body> 等 标签 ， 使 用 HTML5 的 DOCTYPE 声明 文档 类 型 ， 
简化 <meta> 的 charset 属性 设置 ， 省 略 <p> 标 签 的 结束 标记 ， 使 用 < 元 素 记 的 方式 来 结束 <meta> 和 <br> 
标签 等 ， 代 码 如 下 。 


<!DOCTYPE html> 
<meta charset="UTF-8"> 
<title>HTMLS5 基本 语法 </title> 
<hl>HTMLS 的 目标 </h1> 
<p>HTMLS 的 目标 是 为 了 能 够 创建 更 简单 的 Web 程序 ， 书 写 出 更 简洁 的 HTML 代码 。 
<br> 例 如 ， 为 了 使 Web 应 用 程序 的 开发 变 得 更 容易 ， 提 供 了 很 多 API; 为 了 使 HIML 变 得 更 简洁 ， 开 发 
出 了 新 的 属性 、 新 的 元 素 等 。 总 体 来 说 ， 为 下 一 代 Web 平台 提供 了 许 许 多 多 新 的 功能 。 


这 段 代码 在 正 浏览 占 中 的 运行 结果 如 图 10.1 所 示 。 


由 -| 个 htpy/localhost ~ 旦 0 @ HTML5 基 本 语法 


HTMILS 的 目标 
EML 5 的 目标 是 为 了 能 够 创建 更 障 单 的 Web 程 序 ， 书写 出 更 简洁 的 HIML 代 





例如 ， 为 了 使 Web 应 用 程序 的 开发 变 得 更 容易 ， 提 供 了 很 多 API; 为 了 使 
HTML 变 得 更 简洁 ， 开 发 出 了 新 的 属性 、 新 的 元 素 等 。 总 体 来 说 ， 为 下 一 代 
Web 平 台 提 人 殿 了 许 许多 多 新 的 功能 。 





图 10.1 编写 HIMLS 文档 


.314 。 
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通过 短 短 几 行 代码 就 完成 了 一 个 页 面 的 设计 , 这 充分 说 明了 HTML5 语法 的 简洁 。 同时 , HTML5 
不 是 一 种 XML 语言 ， 其 语法 也 很 随意 ， 下 面 从 这 两 方面 进行 逐 句 分 析 。 
第 一 行 代 码 如 下 。 


<IDOCTIYPE HIMI> 





不 需要 包括 版 本 号 ， 仅 告诉 浏览 器 需要 一 个 doctype 来 触发 标准 模式 ， 可 谓 简明 扼要 。 
接 下 来 说 明文 档 的 字符 编码 ， 人 否则 将 出 现 浏览 右 不 能 正确 解析 的 情况 。 


<meta charset="utf-8"> 


同样 也 很 简单 ，HTMLS 不 区 分 大 小 写 ， 不 需要 标记 结束 符 ， 不 介意 属性 值 是 否 加 引号 ， 即 下 列 
代码 是 等 效 的 。 


<meta charset="utf-8"> 
<META charset="utf-8" /> 
<META charset=utf-8> 


在 主体 中 ， 可 以 省 略 主体 标记 ， 直 接 编写 需要 显示 的 内 容 。 虽 然 在 编写 代码 时 省 略 了 <html>、 
<head> 和 <body> 标 记 ， 但 在 浏览 右 进 行 解析 时 ， 将 会 目 动 进行 添加 。 但 是 ， 考 碟 到 代码 的 可 维护 性 ， 
在 编写 代码 时 ， 应 该 尽量 增加 这 些 基本 结构 标签 。 


10.1.4 设计 文章 块 


article 表示 文章 ， 用 来 标识 页 面 中 一 块 完 整 的 、 独 立 的 、 可 以 被 转发 的 内 容 。 例 如 ， 报 纸 文章 、 
论坛 帖子 、 用 户 评论 、 博 客 条 目 等 。 





写 ' 提示 : 一 些 交互 式 小 部 件 或 小 工具 ， 又 或 任何 其 他 可 独立 的 内 容 ， 原 则 上 都 可 以 作为 article 块 ， 
如 日 期 选择 器 组 件 ， 但 这 些 内 容 不 是 HTMLS 新 增 article 元 素 的 主要 目的 ， 故 不 建议 
混用。 


【示例 1】article 内 容 块 通常 包含 标题 ， 放 在 header 元 素 里 面 ， 有 时 还 包含 footer, 定义 附加 信息 。 
本 示例 演示 了 如 何 使 用 article 设计 一 篇 新 闻 稿 ， 代 人 码 如 下 。 


<article> 
<header> 
<hl> 首 届 Web 高 层 论坛 (Web Executive Forum ) 将 于 2017 年 11 月 在 美国 旧金山 举行 </h1> 
<time pubdate="pubdate">2017 年 9 月 26 日 消息 </time> 
</header> 
<p>W3C 将 于 2017 年 11 月 8 日 在 美国 加 州 旧 人 金山 举行 首届 W3C Web 高 层 论坛 (Web Executive 
Forum) ， 来 自 支 付 宝 (Alipay) 、 美 国运 通 (American Express) 、 彭 博 (Bloomberg) 、 哈 曼 (HARMAN) 、 
谷歌 (Google) 、 英 特 尔 (Intel) 、Mozilla、 三 星 (Samsung) 、 南 内 华 达 地 区 交通 局 (Southern Nevada Regional 
Transportation Agency) 、 悉 尼 大 学 (University of Sydney) 、Worldpay、Yubico 等 机 构 的 代表 将 与 W3C 的 发 明 
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人 、W3C 理事 长 Tim Bemers Lee 一 起 ， 探 讨 Web 的 技术 趋势 及 对 行业 产业 的 影响 。 这 是 W3C 首次 举办 此 类 
论坛 ， 论 坛 将 与 W3C TPAC 2017 会 议 同期 举行 。</p> 


<footer> 
<p> 来 自 <a hre 伍 "http://www.chinaw3c.org/archives/1980/" target=" blank">W3C 中 国 </a></p> 
</footer> 
</article> 


上 面 示例 中 是 一 篇 关于 互联 网 新 闻 的 文章 ， 在 header 元 素 中 其 入 了 文章 的 标题 部 分 ， 在 这 部 分 
中 ， 文 章 的 标题 被 镶 骸 在 hl 元 素 中 ， 文 章 的 发 表 日 期 镶 骨 在 tme 元 素 中 。 在 标题 下 部 的 p 元 素 中 ， 
能 入 了 一 大 段 文 章 的 正文 ， 在 结尾 处 的 footer 元 素 中 ， 作 为 脚注 ， 通 入 了 文章 的 来 源 。 整 个 文章 块 
的 内 容 相 对 比较 独立 、 完 整 ， 因 此 对 这 部 分 内 容 使 用 了 article 元 素 。 

【示例 2】article 元 素 可 以 嵌 套 使 用 ， 原 则 上 内 层 的 内 容 要 与 外 层 的 内 容 相 关联 。 例 如 ， 在 一 篇 
互联 网 新 闻 中 ， 针 对 该 新 闻 的 相关 评论 就 可 以 使 用 藤 套 article 元 素 设 计 ， 用 来 呈现 评论 的 article 元 
素 被 包含 在 外 层 article 元 素 里 面 ， 代 码 如 下 。 


<article> 
<header>[ 省 略 ]</header> 
<p>[ 请 参考 示例 1]</p> 
<footer>...... </footer> 
<section> 
<h2> 评 论 </h2> 
<article> 
<header> 
<h3> 网 友 昵 称 1</h3> 
<p> 
<time pubdate datetime="2017-9-26 19:40-08:00"> 1 小 时 前 </time> 
</p> 
</header> 
<p>ok</p> 
</article> 
<article>[ 参 考 第 一 条 评论 的 结构 ]</article> 
<article>[ 每 条 评论 作为 一 个 相对 独立 的 内 容 块 ]</article> 
<article>[ 内 层 article 块 与 外 层 article 块 相关 联 ]</article> 
</section> 


</article> 


示例 2 的 内 容 比 示例 1 的 内 容 更 加 丰富 ， 它 添加 了 评论 内 容 。 有 具体 来 说 ，section 把 正文 与 评论 
部 分 进行 了 区 分 ， 在 section 元 素 中 藤 入 了 评论 的 内 容 ， 评 论 中 每 一 个 人 的 评论 相对 来 说 又 是 比较 独 
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立 、 完 整 的 ， 因 此 每 条 评论 都 使 用 一 个 article， 在 评论 中 又 可 以 分 为 标题 和 评论 内 容 两 部 分 ， 分别 放 
在 header 元 素 与 p 元 素 中 。 


10.1.5 ”设计 区 块 


section 表示 区 块 ， 用 于 标识 文档 中 的 节 ， 在 页 面 上 多 对 内 容 进 行 分 区 。 例 如 ， 章 节 、 页 眉 、 页 
脚 或 文档 中 的 其 他 部 分 。 

【辨析 】 

div 元 素 也 可 以 用 来 对 页 面 进行 分 区 , 但 section 元 素 并 非 一 个 普通 的 容 右 。 当 一 个 容器 需要 被 直 
接 定 义 样式 或 通过 脚本 定义 行为 时 ， 推 荐 使 用 div， 而 非 section 元 素 。 

div 元 素 关 注 结构 的 独立 性 ， 而 section 元 素 关 注 内 容 的 独立 性 ，section 元 素 包 含 的 内 容 可 以 单 
独 存储 到 数据 库 中 或 输出 到 Word 文档 中 。 

【示例 1】 一 个 section 区 块 通常 由 标题 和 内 容 组 成 。 本 示例 使 用 section 元 素 包 器 排行 榜 的 内 容 ， 
作为 一 个 独立 的 内 容 块 进行 定义 ， 代 人 码 如 下 。 


<section cite="http://music.baidu.com/"> 

<h1> 新 歌 榜 </h1> 

<ol> 
<]i><a hre 伍 "#"> 区 区 去 哪儿 <p class="ui-li-aside"> 群星 </p></a></li> 
<]i><a hre 舍 "加 > 爱 ， 不 解释 <p class="ui-li-aside"> 张杰 </p></a></li> 
<]li><a hre 舍 " 扣 '> 爱 无 反 顾 <p class="ui-li-aside"> 姚 贝 娜 </p></a></li> 
<]i><a hre 伍 "#"> 房 间 <p class="ui-li-aside"> 刘 瑞 琦 </p></a></li> 
<]li><a hre 伍 "#"> 动 人 的 传说 <p class="ui-li-aside"> 杭 娇 </p></a></li> 
<]i><a hre 伟 "加 > 泼墨 <p class="ui-li-aside"> 周华健 </p></a></li> 
<]i><a hre 伍 "#"> 一 起 摇摆 <p class="ui-li-aside"> 汗 峰 </p></a></li> 
<]i><a hre 伍 "#"> 就 当 是 你 <p class="ui-li-aside"> 许诺 </p> </a></li> 
<]i><a hre 伍 "#">Summer<p class="ui-li-aside"> 吉 死 代 逸 </p></a></li> 
<]i><a hre 伍 "#"> 不 值得 <p class="ui-li-aside"> 曾 一 鸣 </p></a></li> 

</ol> 


</section> 


section 元 素 包 含 cite 属性 ， 用 来 定义 section 的 URL。 如 果 section 摘自 Web， 可 以 设置 该 
属性 。 

【辨析 】 

article 和 section 都 是 HIMLS 新 增 的 元 素 ， 它 们 都 是 用 来 区 分 不 同 内 容 ， 用 法 也 相似 ， 但 从 语 
义 角 度 分 析 ， 两 者 区 别 很 大 。 

加 article 代表 文档 、 页 面 或 者 应 用 程序 中 独立 、 完 整 的 ， 可 以 被 外 部 引用 的 内 容 。 因 为 article 

是 一 段 独立 的 内 容 ， 所 以 通常 包含 header 和 footer 结构 。 
四 section 用 于 对 网 站 或 者 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 。 一 个 section 通常 由 内 容 和 标题 
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组 成 。 因 此 ， 需 要 包含 一 个 标题 ， 一 般 不 用 包含 header 或 者 footer 结构 。 
通常 使 用 section 元 素 为 有 标题 的 内 容 进 行 分 段 ， 类 似 文章 分 段 操作 。 相 邻 的 section 内 容 ， 应 当 
。 是 相关 的 ， 而 不 像 article 之 间 各 自 独立 。 
【示例 2】 本 示例 混用 article 和 section 元 素 ， 从 语义 上 比较 两 者 的 不 同 。article 内 容 强 调 独立 性 、 
完整 性 ，section 内 容 强 调 相 关 性 ， 代 码 如 下 。 


<article> 
<header> 
<h1> 蝶 恋 花 </h1> 
<h2> 受 殊 </h2> 
</header> 
<p> 槛 菊 悉 烟 兰 泣 露 ， 罗 幕 轻 寒 ， 燕 子 双飞 去 。 明 月 不 说 离 恨 苗 ， 斜 光 到 晓 穿 朱 户 。</p> 
<p> 昨 夜 西风 凋 胜 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 。 欲 寄 彩 签 羔 尺 素 ， 山 长 水 阔 知 何 处 。</p> 
<section> 
<h2> 解 析 </h2> 
<article> 
<h3> 注 释 </h3> 
<p> 榄 : 栏杆 。</p> 
<p> 罗 幕 : 丝 罗 的 帷幕 ， 富 贵人 家 所 用 。</p> 
<p> 朱 户 : 狂言 朱 门 ， 指 大 户 人 家 。</p> 
<p> 尺 素 : 书信 的 代称 。</p> 
</article> 
<article> 
<h3> 评 析 </h3> 
<p> 此 词 经 下 淡 的 笔墨 、 温 婉 的 格调 、 说 严 的 章法 ， 传 达 出 作者 的 莫 秋 怀 人 之 情 。 </p> 
<p> 上 片 由 苑 中 景物 起 笔 ， 下 片 写 登 楼 望 远 。 以 无 可 奈何 的 帐 问 作 结 ， 给 人 情 也 悠悠 、 恨 也 
悠悠 之 感 。 </p> 


</article> 
</section> 
</article> 
【人 退 问 】 
既然 article、section 是 用 来 划分 区 域 的 , 又 是 HIMLS 的 新 元 素 ， 那么 是 否 可 以 用 article、section 
取代 div 来 布局 网 页 呢 ? 


答案 是 否定 的 。div 的 用 处 就 是 布局 网 页 ， 划 分 大 的 区 域 ， 所 以 我 们 习惯 性 地 把 div 当成 了 一 个 
容器 。 而 HIMLS 改变 了 这 种 用 法 ， 它 让 div 的 工作 更 纯正 。div 就 是 用 来 布局 的 ， 在 不 同 的 内 容 
块 中 ， 用 户 按照 需求 添加 article、section 等 内 容 块 ， 并 且 显 示 其 中 的 内 容 ， 这 样 才 是 合理 地 使 用 这 
些 元 素 。 

因此 ， 在 使 用 section 元 素 时 应 该 注意 以 下 几 个 问题 。 
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四 “不 要 将 section 元 素 当 作 设 置 样式 的 结构 容器 ， 对 于 此 类 操作 应 该 使 用 div 元 素 实 现 。 

加 ”如 果 article、aside 或 nav 元 素 更 符合 语义 使 用 和 条件， 不 要 首选 section 元 素 。 

回 “ 不 要 为 没有 标题 的 内 容 区 块 使 用 section 元 素 。 国会 4 

【补充 】 : 

使 用 HIMLS 大 纲 工 具 (http://gsnedders.html5.org/outliner/) 来 检查 页 面 中 是 否 有 没 标题 的 section， 
如 果 使 用 该 工具 进行 检查 后 ， 发 现 某 个 section 的 说 明 中 有 “untitiled section”( 没 有 标题 的 section ) 
文字 ， 这 个 section 就 有 可 能 使 用 不 当 ， 但 是 nav 元 素 和 aside 元 素 没有 标题 是 合理 的 。 

【示例 3】 本 示例 进一步 演示 了 article 和 section 混用 的 情景 ， 代 码 如 下 。 





<article> 
<hl>W3C</h1> 
<p> 万 维 网 联盟 (World Wide Web Consortium，W3C) ， 又 称 W3C 理事 会 。1994 年 10 月 在 麻 省 理工 
学 院 计 算 机 科学 实验 室 成 立 。 建 立 者 是 万 维 网 的 发 明 者 带 姆 &middot; 伯 纳 斯 - 李 。</p> 
<section> 
<h2>CSS</h2> 
<p> 全 称 Cascading Style Sheet， 级 联 样式 表 ， 通 常 又 称 为 风格 样式 表 (Style Sheet) ， 它 是 用 来 进 
行 网 页 风格 设计 的 。 </p> 
</section> 
<section> 
<h2>HIML</h2> 
<p> 全 称 Hypertext Markup Language， 超 文本 标记 语言 ， 用 于 描述 网 页 文档 的 一 种 标记 语言 。 
</p> 
</section> 


</article> 


在 示例 3 中 ， 首 先 可 以 看 到 整个 版 块 是 一 段 独立 的 、 完 整 的 内 容 ， 因 此 使 用 article 元 素 标 识 。 
该 内 容 是 一 篇 关于 W3C 的 简介 ， 该 文章 分 为 3 段 ， 每 一 段 都 有 一 个 独立 的 标题 ， 因 此 使 用 了 两 个 
section 元 素 区 分 。 

【 退 问 】 

为 什么 没有 对 第 一 段 使 用 section 元 素 呢 ? 

其 实 是 可 以 使 用 的 ， 但 是 由 于 其 结构 比较 清晰 ， 浏 贤 器 能 够 识别 第 一 段 内 容 在 一 个 section 内 ， 
所 以 也 可 以 将 第 一 个 section 元 素 省 略 ， 但 是 如 果 第 一 个 section 元 素 里 还 包含 子 section 元 素 或 子 
article 元 素 ， 那 么 就 必须 标识 section 元 素 。 

【示例 4】 这 是 一 个 包含 article 元 素 的 section 元 素 示例 ， 代 码 如 下 。 


<section> 
<hl>W3C</hl1> 
<article> 
<h2>CSS</h2> 
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<p> 全 称 Cascading Style Sheet， 级 联 样式 表 ， 通 和 常 又 称 为 "风格 样式 表 (Style Sheet) "， 它 是 用 来 
进行 网 页 风格 设计 的 。</p> 
</article> 
<h2>HTML</h2> 
<p> 全 称 Hypertext Markup Language， 超 文本 标记 语言 ， 用 于 描述 网 页 文档 的 一 种 标记 语言 。</p> 


</section> 


示例 4 比 示 例 3 复杂 了 一 些 。 首 先 ， 它 是 一 篇 文章 中 的 一 段 ， 因 此 没有 使 用 article 元 素 。 但 是 ， 


”在 这 一 段 中 有 几 块 独立 的 内 容 ， 所 以 嵌入 了 几 个 独立 的 article 元 素 。 


在 HIMLS 中 ，article 可 以 是 一 种 特殊 功能 的 section 元 素 ， 它 比 section 元 素 更 强调 独立 性 。 即 


: section 元 素 强调 分 段 或 分 块 ， 而 article 强调 独立 性 。 有 具体 来 说 ， 如 果 一 块 内 容 相 对 来 说 比较 独立 、 


完整 ， 应 该 使 用 article 元 素 ， 但 是 如 果 想 将 一 块 内 容 分 成 几 段 ， 应 该 使 用 section 元 素 。 
在 HIMLS 中 ，div 变 成 了 一 种 容器 ， 当 应 用 CSS 样式 的 时 候 ， 可 以 对 这 个 容器 进行 一 个 总 体 的 


”Css 样式 的 套用 。 因 此 ， 可 以 将 页 面 的 所 有 从 属 部 分 ， 如 导航 条 、 菜 单 、 版 权 说 明 等 ， 包 含 在 一 个 


统一 的 页 面 结构 中 ， 以 便 统 一 使 用 CSS 样式 来 进行 装饰 。 


10.1.6 ”设计 导航 条 


nav 表示 导航 条 ， 用 来 标识 页 面 导航 的 链接 组 。 一 个 页 面 中 可 以 拥有 多 个 nav， 作 为 页 面 整体 或 
不 同 部 分 的 导航 。 具 体 应 用 场景 如 下 。 
名 ” 主 菜 单 导航 。 一 般 网 站 都 设置 有 不 同 层级 的 导航 条 ， 其 作用 是 在 站 内 快速 切换 ， 如 主 菜 单 、 
置顶 导航 条 、 主 导航 图 标 等 。 
四 ” 侧 边 栏 导 航 。 现 在 主流 博客 网 站 及 商品 网 站 上 都 有 侧 边 栏 导航 ， 其 作用 是 将 页 面 从 当前 文 
章 或 当前 商品 跳 转 到 相关 文章 或 商品 页 面 上 去 。 
四 ”页 内 导航 。 就 是 页 内 锚 点 链接 ， 其 作用 是 在 本 页 面 几 个 主要 的 组 成 部 分 之 间 进 行 跳 转 。 
MM ” 翻 页 操作 。 翻 页 操作 是 指 在 多 个 页 面 的 前 后 页 或 博客 网 站 的 前 后 篇 文章 滚动 。 
并 不 是 所 有 的 链接 组 都 要 被 放 进 nav 中 ， 只 需要 将 主要 的 、 基 本 的 链接 组 放 进 nav 元 系 即 可 。 
例如 ， 在 页 脚 中 通常 会 有 一 组 链接 ， 包 括 服 务 条 款 、 首 页 、 版 权 声 明 等 ， 这 时 使 用 footer 元 素 是 最 


【示例 1】 在 HIMLS 中 ， 只 要 是 导航 性 质 的 链接 ， 我 们 就 可 以 很 方便 地 将 其 放 入 nav 元 素 中 。 
该 元 素 可 以 在 一 个 文档 中 多 次 出 现 ， 作 为 页 面 或 部 分 区 域 的 导航 ， 代 码 如 下 。 


<nav draggable="true"> 
<a hre 伟 "index.html"> 首 页 </a> 
<a hre 传 "book.html"> 网 书 </a> 
<a hre 传 "bbs.html"> 论 坛 </a> 


</nav> 


上 述 代码 创建 了 一 个 可 以 拖 动 的 导航 区 域 , nav 元 系 中 包含 了 3 个 用 于 导航 的 超 链接 , 即 “ 首 页 ” 


“图 书 ”“ 论 坛 ”。 该 导航 可 用 于 全 局 导航 ， 也 可 放 在 菜 个 段落 ， 作 为 区 域 导航 。 
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【示例 2】 本 示例 页 面 由 多 部 分 组 成 ， 每 部 分 都 带 有 链接 ， 但 只 将 最 主要 的 链接 放 入 了 nav 元 素 
中 ， 代 码 如 下 。 





在 该 示例 中 ， 第 1 个 nav 元 素 用 于 页 面 导 航 ， 将 页 面 跳 转 到 其 他 页 面 上 去 ， 如 跳 转 到 网 站 主页 
或 博客 页 面 ; 第 2 个 nav 元 素 放置 在 article 元 素 中 ， 表 示 在 文章 内 进行 导航 。 除 此 之 外 ，nav 元 素 也 
可 以 用 于 其 他 所 有 重要 的 、 基 本 的 导航 链接 组 中 。 
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< 从 注意 : 不 要 用 menu 元 素 代替 nav 元 素 。menu 主要 用 在 一 系列 交互 命令 的 菜单 上 ， 如 快捷 菜单 。 


10.1.7 设计 辅助 栏 


aside 表示 侧 边 ， 用 来 标识 所 处 内 容 之 外 的 内 容 。aside 内 容 应 该 与 所 处 的 附近 内 容 相 关 。 例 如 ， 
当前 页 面 或 文章 的 附属 信息 部 分 ， 它 可 以 包含 与 当前 页 和 面 或 主要 内 容 相 关 的 引用 、 侧 边 广告 、 导 航 
条 ， 以 及 其 他 类 似 的 有 别 于 主要 内 容 的 部 分 。 

aside 元 素 主 要 有 以 下 两 种 用 法 。 

加 ”作为 主体 内 容 的 附属 信息 部 分 ， 包 含 在 article 中 ，aside 内 容 可 以 是 与 当前 内 容 有 关 的 参考 

资料 、 名 词 解 释 等 。 

【示例 1】 本 示例 将 设计 一 篇 文章 ， 文 章 标题 放 在 header 中 ， 在 header 后 面 将 所 有 关于 文章 的 部 
分 放 在 了 一 个 article 中 ， 将 文章 正文 放 在 一 个 p 元 素 中 。 该 文章 包含 一 个 名 词 注释 的 附属 部 分 ， 
此 在 正文 下 面 放置 了 一 个 aside 元 素 ， 用 来 存放 名 词 解 释 的 内 容 ， 代 码 如 下 。 


<header> 
<hl>HTMLS$</h1> 
</header> 
<article> 
<hl>HTMLS 历史 </h1> 
<p>HTML5 草案 的 前 身 名 为 Web Applications 1.0， 于 2004 年 被 WHATWG 提 出 ， 于 2007 年 被 W3C 接 
纳 ， 并 成 立 了 新 的 HTML 工作 团队 。HIMLS 的 第 一 份 正式 草案 已 于 2008 年 1 月 22 日 公布 。2014 年 10 月 28 
日 ，W3C 的 HTML 工作 组 正式 发 布 了 HTMLS 的 官方 推荐 标准 。</p> 
<aside> 
<hl> 名 词 解 释 </h1> 
<dl> 
<dt~>WHATWG</dt> 
<dd>Web Hypertext Application Technology Working Group,HTML 工作 开发 组 的 简称 ， 目 前 与 
W3C 组 织 同时 研发 HTML5。</dd> 
</dl> 
<dl> 
<dt>W3C</dt> 
<dd>World Wide Web Consortium， 万 维 网 联盟 ， 万 维 网 联盟 是 国际 著名 的 标准 化 组 织 。 
1994 年 成 立 后 ， 至 今 已 发 布 近 百 项 相关 万 维 网 的 标准 ， 对 万 维 网 发 展 做 出 了 杰出 的 贡献 。</dd> 
</dl> 
</aside> 


</article> 


这 个 aside 被 放置 在 一 个 article 内 部 ， 因 此 引擎 将 这 个 aside 内 容 理 解 为 与 article 内 容 是 相关 
联 的 。 
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加 ”作为 页 面 或 站 点 辅助 功能 部 分 ， 在 article 之 外 使 用 。 最 典型 的 形式 是 侧 边栏 ， 其 中 的 内 容 
可 以 是 友情 链接 、 最 新 文章 列表 、 最 新 评论 列表 、 历 史 存 档 和 日 历 等 。 
【示例 2】 下面 的 代码 使 用 了 aside 元 素 为 个 人 博客 添加 一 个 友情 链接 辅助 版 块 。 


<aside> 
<naV>> 
<h2> 友 情 链接 </h2> 
< 
<]i> <a hre 传 "#'> 网 站 1</a></li> 
<]i> <a hre 传 "#'> 网 站 2</a></li> 
<]i> <a hre 仁 "#'> 网 站 3</a></li> 
</ul> 
</nav> 


</aside> 


友情 链接 在 博客 网 站 中 比较 和 常见， 一般 放 在 左右 两 侧 的 边栏 中 ， 因 此 可 以 使 用 aside 来 实现 , 但 
是 这 个 版 块 又 具有 导航 作用 ， 因 此 栓 套 了 一 个 nav 元 素 ， 该 侧 边栏 的 标题 是 “友情 链接 ”， 放 在 了 h2 
元 素 中 ， 在 标题 之 后 使 用 了 一 个 由 列表， 用 来 存放 具体 的 导航 链接 列表 。 


10.1.8 ”设计 主要 区 域 


main 表示 主要 的 ， 用 来 标识 网 页 中 的 主要 内 容 。main 内 容 对 于 文档 来 说 应 当 是 唯一 的 ， 它 不 应 
包含 在 网 页 中 重复 出 现 的 内 容 里 ， 如 侧 栏 、 导 航 栏 、 版 权 信 息 、 站 点 标志 或 搜索 表单 等 。 

简单 说 ,在 一 个 页 面 中 , 不 能 出 现 一 个 以 上 的 main 元 素 。main 元 素 不 能 被 包 庄 在 article、aside、 
footer、header 或 nav 中 。 


写 提示 : 由 于 main 元 素 不 对 页 面 内 容 进 行 分 区 或 分 块 ， 所 以 不 会 对 网 页 大 纲 产 生 影响 。 


【示例 】 本 示例 使 用 main 元 素 包 里 页 和 面 主要 区 域 ， 这 样 更 有 利于 网 页 内 容 的 语义 分 区 ， 同 时 搜 
索引 擎 也 能 够 主动 抓 取 主 要 信息 ， 避 免 被 次 要 信息 干扰 ， 代 码 如 下 。 


<header> 
<nav> 
<ul> 
<]i><a hre 伍 "#"> 首 页 </a></li> 
<li><a hre 伍 "#"> 站 内 新 闻 </a></li> 
<li><a hre 伍 "#"> 站 外 新 闻 </a></li> 
</ul> 
</nav> 
</header> 


<main> 
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| <hl> 站 内 新 闻 </h1> 
<DaV> 
<li><a href="#">HTML5</a></li> 
<]><a hre 人 f="#">CSS3</a></li> 
<]1><a href—="#">JavaScript</a></]1> 
</ul> 
</nav> 
<H2 1d="web">W3C</H2> 
<h3>W3C 中 国 区 会 员 沙 龙 在 北京 航空 航天 大 学 举行 </h3> 
<p>2017 年 9 月 14 日 ，W3C 在 北京 航空 航天 大 学 举办 了 中 国 区 会 员 沙龙 活动 ， 回 到 会 的 中 国 区 会 员 
代表 介绍 W3C 目前 标准 工作 进展 及 计划 ， 并 提供 一 个 新 老 朋 友 参 与 W3C 及 其 他 相关 话题 问答 与 互动 讨论 的 
交流 平台 。</p> 
<h2 id="new"> 最 新 新 闻 </h2> 
<ul> 
<li>W3C 发 布 ODRL 信息 模型 、ODRL 词汇 表 及 表达 两 份 候选 推荐 标准 征集 参考 实现 及 审阅 意 





<li>W3C 技术 研讨 会 : Web 虚拟 现实 编著 一 机 过 与 挑战 </li> 
<li>W3C 发 布 核心 无 障碍 API 映射 (Core-AAM) 1.1 版 候选 推荐 标准 征集 参考 实现 </li> 
</ul> 
<h2 id="blog">W3C 官方 博客 </h2> 
<ul> 
<li>W3C 启动 WebAssembly 工作 组 </li> 
<li>W3C 数据 的 未 来 方向 </li> 
<li>W3C 数字 出 版 主要 进展 </li> 
</ul> 
</main> 
<footer> 本 站 由 北京 航空 航天 大 学 (W3C/Beihang ) 维护 京 ICP 备 05004617-3 文保 网 安 备 案 号 
1101080018</footer> 


10.1.9 ”设计 标题 栏 


i header 表示 页 眉 ， 用 来 标识 页 面 标题 栏 。header 元 系 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ,， 通 
况 频 讲解 | 常用 来 放置 整个 页 面 ， 或 者 一 个 内 容 块 的 标题 
| header 也 可 以 包含 其 他 内 容 ， 如 数据 表格 、 表 单 或 相关 的 LOGO 信息 ， 一 般 整 个 页 和 面 的 标题 应 





该 放 在 页 面 的 前 面 。 
【示例 1】 在 一 个 网 页 内 可 以 多 次 使 用 header 元 素 , 本 示例 显示 为 每 个 内 容 区 块 添加 一 个 header， 
代码 如 下 。 
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<header> 
<hl> 网 页 标题 </h1> 
</header> 
<article> 
<header> 
<h1> 文 章 标题 </h1> 
</header> 
<p> 文 章 正文 </p> 
</article> 


在 HIMLS 中 ， header 内 部 可 以 包含 h1-h6 元 素 ， 也 可 以 包含 hgroup、table、form、nav 等 元 素 ， 
只 要 应 该 显示 在 头 部 区 域 的 标签 ， 都 可 以 包含 在 header 元 素 中 。 
【示例 2】 本 示例 是 个 人 博客 首页 的 头 部 区 域 ， 整 个 头 部 内 容 都 放 在 header 元 素 中 ， 代 码 如 下 。 


<header> 
<hgroup> 
<hl>LOGO</h1> 
<a href="#">[URL]</a> <a hre 伍 "#">[ 订 阅 ]</a> <a hre 伍 "#">[ 手 机 订阅 ]</a> </hgroup> 
<DaV> 
<ul> 
<] 二 首页 </li> 
<]i><a hre 伍 "#"> 目 录 </a></li> 
<]li><a hre 伍 "#"> 社 区 </a></li> 
<li><a hre 伍 "#"> 微 博 我 </a></li> 
</ul> 
</nav> 


</header> 


10.1.10 ”设计 标题 组 


hgroup 表示 标题 分 组 ， 用 来 为 标题 或 子 标题 进行 分 组 。 通 常 hgroup 与 h1 一 h6 元 素 组 合 使 用 ， 
一 个 内 容 块 中 的 标题 及 其 子 标 题 可 以 通过 hrgoup 组 成 一 组 。 但 是 ， 如 果 文 章 只 有 一 个 主 标 题 ， 则 不 
需要 hgroup 元 素 。 

【示例 】 本 示例 显示 如 何 使 用 hgroup 元 素 把 主 标 题 、 副 标题 和 标题 说 明 进 行 分 组 ， 以 使 让 引擎 更 
容易 识别 标题 块 ， 代 码 如 下 。 


<article> 
<header> 
<hgroup> 
<hl> 首 届 Web 高 层 论坛 将 于 2017 年 11 月 在 美国 旧金山 举行 </h1> 


i pA 
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<h2>September 26, 2017</h2> 
<h3> 国 际 新 闻 ,TPAC 及 AC, 博 客 文章 ,技术 活动 </h3> 
</hgroup> 
</header> 
<p> 本 次 论坛 的 议程 包括 一 系列 圆桌 讨论 (Panel Discussion ) 和 高 端 对 话 : </p> 
<ul> 
<]li>Web 支付 的 未 来 (Future of Payments on the Web ) </li> 
<1> 网 联 汽 车 、 城 市 和 Web (Connected Cars、Cities and Web) </li> 
<li>Web 新 兴 技 术 (Emerging Technologies) </li> 
<]i> 对 话 : Web 的 未 来 ， 嘉 宾 : Brad Stone ( 弦 博 ) 、Sir Tim Bemers Lee (W3C) </li> 
</ul> 
</p> 
</article> 


10.1.11 设计 页 脚 栏 








水 footer 表示 脚注 ， 用 来 标识 文档 或 节 的 页 脚 。footer 元 素 应 当 含 有 其 包含 元 素 的 信息 。 例 如 ， 页 
视频 讲解 脚 通常 包含 文档 的 作者 、 版 权 信息 、 使 用 条 款 链接 、 联 系 信息 等 。 
【示例 1】 在 HIML4 中 ， 一 般 使 用 <div id="footer"> 包 庄 页 脚 信 息 ， 现 在 使 用 footer 元 素来 替代 ， 
更 富有 语义 。 本 示例 使 用 footer 元 素 为 页 面 添加 版 权 信息 栏目 ， 代 码 如 下 。 


</article> 
<footer> 
<ul> 
<]> 关 于 </li> 
<] 二 导航 </li> 
<] 二 联系 </li> 
</ul> 
</footer> 


【示例 2】 在 一 个 页 面 中 ， 可 以 使 用 多 个 footer 元 素 。 同 时 ， 可 以 为 article 或 section 内 容 添 加 
footer。 本 示例 分 别 在 article、section 和 body 区 域内 添加 footer 信息 ， 代 码 如 下 。 


<header> 
<h1> 网 页 标题 </h1> 
</header> 
<article> 
<h2> 文 章 标题 </h2> 
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<p> 文 章 内 容 正 文 </p> 
<footer> 注 释 </footer> 
</article> 
<section> 
<h2> 段 落 标 题 </h2> 
<p> 正 文 </p> 
<footer> 段 落 标 记 </footer> 
</section> 


<footer> 网 页 版 权 信息 </footer> 





10.2 CSS3 增强 的 界面 特性 


CSS3 改善 了 传统 盒 模型 结构 ， 增 强 了 盒子 构成 要 素 的 功能 ， 扩 展 了 盒 模 型 显示 的 方式 。 
10.2.1 定义 显示 方式 


为 了 兼顾 正 怪异 模式 ，CSS3 对 盒 模 型 进行 了 改善 ,定义 了 box-sizing 属性 ， 该 属性 能 够 事先 定 
义 盒 模型 的 尺寸 解析 方式 。box-sizing 属性 的 基本 语法 如 下 。 





box-sizing:content-box | border-box 


取 值 简单 说 明 如 下 。 

四 ”content-box: box-sizing 属性 的 初始 值 ， 适 用 于 所 有 能 够 定义 宽 和 高 的 元 素 。 该 属性 值 将 维 
持 CSS 2.1 盒 模 型 的 组 成 模式 ， 即 元 素 width/height=border+ padding+content。 

四 “border-box: 该 属性 值 将 重新 定义 CSS 2.1 盒 模型 的 组 成 模式 ， 即 元 素 width/height=content。 
此 时 浏览 器 对 盒 模型 的 解释 与 正 6 解析 相同 。 

目前 ，Webkit 引擎 支持 -webkit-box-sizing 私有 属性 ，Mozilla Gecko 引擎 支持 -moz-box-sizing 私 

有 属性 ，Presto 引 敬 和 正 浏览 器 直接 支持 该 属性 。 
演示 示例 可 以 参考 10.3.4 节 案 例 。 


10.2.2 ”定义 可 控 大 小 


为 了 增强 用 户 体 验 ，CSS3 增加 了 很 多 新 的 属性 ， 其 中 一 个 重要 的 属性 就 是 resize， 它 允许 用 户 
通过 拖 动 的 方式 改变 元 素 的 尺寸 。 到 有 目前 为 止 ， 主 要 用 于 可 以 使 用 overflow 属性 的 任何 容器 元 素 中 。 
resize 属性 的 基本 语法 如 下 。 





resize:none | both | horizontal | vertical | Inherlt'; 


取 值 简单 说 明 如 下 。 
回 none: 浏览 器 不 提供 尺寸 调整 机 制 ， 用 户 不 能 操纵 机 制 调节 元 素 的 尺寸 。 该 值 是 resize 属 
性 的 初始 值 ， 适 用 于 所 有 overflow 属性 不 为 visible 的 元 素 。 
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both: 浏览 器 提供 双 辐 尺寸 调整 机 制 ， 人 允许 用 户 调节 元 素 的 宽度 和 高 度 。 
horizontal: 浏览 右 提 供 单 回 水 平 尺寸 调整 机 制 ， 人 允许 用 户 调节 元 素 的 宽度 。 
vertical: 浏览 器 提供 单 癌 垂直 尺寸 的 调整 机 制 ， 人 允许 用 户 调节 元 素 的 高 度 。 
inherit: 默认 继承 。 
目前 除了 正 浏览 器 外 ， 其 他 最 新 版 本 主流 浏览 右 都 允许 元 素 的 缩放 ， 但 尚未 完全 文 持 ， 部 分 仅 
允许 双向 调整 。CSS3 允许 将 该 属性 应 用 到 任意 元 素 ， 这 将 使 网 页 缩放 功能 获得 跨 浏 览 器 的 支持 。 
【示例 】 本 示例 演示 如 何 使 用 resize 属性 设计 可 以 自由 调整 大 小 的 图 片 ， 代 码 如 下 ， 演 示 效 果 如 
图 10.2 所 示 。 


多 的 的 的 





<style type="text/css"> 
#resize { 
谍 以 背景 方式 显示 图 像 ， 这 样 可 以 更 轻松 地 控制 缩放 操作 */ 
backsground:url(images/1.]pg) no-repeat center:; 
谍 设 计 背 景 图 像 仅 在 内 容 区 域 显示 ， 留 出 补 白 区 域 */ 
background-clip:content: 
谍 设 计 元 素 最 小 和 最 大 显示 尺寸 ， 用 户 也 只 能 在 该 范围 内 自由 调整 */ 
width:200px; 
height: 120px; 
max-width:800px; 
max-height:600px:; 
padding:6px:; 
border: 1px solid red: 
/# 必 须 同 时 定义 overflow 和 resize， 否 则 resize 属性 声明 无 效 ， 元 素 默 认 洲 出 显示 为 visible*/ 


TeslZe: both: 
overflow: auto: 
} 
</style> 


<div 1d="resize"></div> 


0 locoelhost:8080/mysite! x 


GG | © localhost:8080/mysite/test.html 


> 





默认 大 小 鼠标 拖 动 放大 
图 10.2 调节 元 素 尺寸 
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10.2.3 ”定义 轮 记 


outline 属性 可 以 定义 块 元 素 的 轮廓 线 , 该 属性 在 CSS 2.1 规范 中 已 被 明确 定义 ,但 是 并 未 得 到 各 
主流 浏览 器 的 广泛 文 持 ，CSS3 增强 了 该 特性 。 

在 元 素 周 围 绘制 一 条 轮廓 线 ， 可 以 起 到 突出 元 素 的 作用 。 例 如 ， 可 以 在 原本 没有 边框 的 radio 单 
选 按钮 外 围 加 上 一 条 轮廓 线 ， 使 其 在 页 面 上 显得 更 加 突出 ， 也 可 以 在 一 组 radio 单 选 按钮 中 只 为 茶 个 
单 选 按钮 加 上 轮廓 线 ， 使 其 区 别 于 别 的 单 选 按钮 。 

outline 属性 的 基本 语法 如 下 。 





outline:[outline-color| || [outline-style] || [outline-width| || [outlineoffset]| Inherlt 


outline 属性 初始 值 根据 具体 的 元 素 而 定 ， 它 适用 于 所 有 元 素 。 取 值 简 单 说 明 如 下 。 
<outline-color>: 定义 轮廓 边框 颜色 。 
<outline-style>: 定义 轮廓 边框 轮廓 。 
<outline-width>: 定义 轮廓 边框 宽度 。 
<outline-offset>: 定义 轮廓 边框 偏 移 位 置 的 数值 。 
inherit: 默认 继承 。 
注意 ，outline 属性 创建 的 轮廓 线 是 画 在 一 个 框 “ 上 面 >， 也 就 是 说 ， 轮 廓 线 总 是 在 项 上 ， 不 会 影 
啊 该 框 或 任何 其 他 框 的 尺寸 。 因 此 ， 显 示 或 不 显示 轮廓 线 不 会 影响 文档 流 ， 也 不 会 破坏 网 页 布局 。 
轮廓 线 可 能 是 非 从 形 的 。 例 如 ， 如 果 元 素 被 分 割 在 好 几 行 ， 那 么 轮廓 线 就 至 少 能 包含 该 元 素 所 
有 框 的 外 廓 。 和 边框 不 同 的 是 ， 外 廓 在 线 框 的 起 始 痕 都 不 是 开放 的 ， 它 总 是 完全 闭合 的 。 
【示例 】 在 一 个 元 素 获 得 焦点 时 在 周围 画 一 个 粗 实 线 外 廓 ， 而 在 它 活动 时 国 一 个 不 同色 的 粗 实 线 
外 廊 ， 从 而 提高 用 户 交 互 效 果 。 代 码 如 下 ， 效 果 如 图 10.3 所 示 。 


多国 的 的 


<style type="text/css"> 
body {/* 统 一 页 面 字 体 和 大 小 */ 
font-famlly:"Luclda Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif: 
font-slze:12PpX: 
} 
旋 清 除 常 用 元 素 的 边界 、 补 白 、 边 框 的 默认 样式 */ 
p; hl, form, button { border:0; margin:0; padding:0;} 
人 # 定 义 一 个 强制 换行 显示 类 类 
.Spacer { clear:both; helght:1px:} 
旋 定 义 表单 外 框 样式 */ 
.myform {margin:0 auto; width:400px; padding:14px;:} 
谍 定 制 当前 表单 样式 */ 
#stylized { border:solid 2px #b7ddf2; background:#ebf4fb:;} 
人 # 设 计 表 单 内 div 和 p 通用 样式 效果 */ 
#styllizedhl {font-size:14px; font-weight:bold;margin-bottom:8px;} 
#stylizedp { 


“2 








font-slze:11px: color:#666666; 
margin-bottom:20px; padding-bottom:10px:; 
border-bottom:solid 1px #b7ddf2:; 

} 

#stylized label {/* 定 义 表 单 标 签 样式 */ 
display:block: width:140px: 
font-welghtbold: text-align:right: 
float:left: 

} 

#stylized .small {/* 定 义 小 字体 样式 类 */ 
color:#666666; font-size:1 1px; font-weight:norma!l; text-align:right; 
display:block: width:140px: 


} 
#stylized input {/* 统 一 输入 文本 框 样式 */ 
float:left: 
font-slze:12PpX: 
padding:4px 2px; margin:2px 0 20px 10px; 
border:solid 1px #aacfe4:; width:200px; 
} 
#stylized button {/* 定 义 图 形 化 按钮 样式 */ 
clear:both: 
margin-left:1 SOpx:; 
width:12Spx; height:3 1px; 
background:#666666 url(1mages/button.png) no-Tepeat': 
text-align:center; line-height:31px; color:#FFFFFF: font-slze:11px: font-weight:bold:; 
} 
讶 设计 表单 内 文本 框 和 按钮 在 被 激活 和 获取 焦点 状态 下 ， 轮 万 线 的 宽 、 样 式 和 颜色 */ 


input:focus, button:focus { outline: thick solld #b7ddf2 } 

input:active, button:active  { outline: thick solid #aaa } 

</style> 

<div 1d="stylized" class="myform"> 

<form 1d="forml1" name="forml]1" method="post" action=""> 

<h1> 登 录 </h1> 
<p> 请 准确 填写 个 人 信息 .…</p> 
<label>Name <span class="small"> 姓 名 </span> </label> 
<input type="text" name="textfield" 1d="textfield" /> 
<label>Email <span class="small"> 电 子 邮箱 </span> </label> 
<input type="text" name="textfield" 1d="textfield" /> 
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<label>Password <span class="small"> 密 码 </span> </label> 
<input type="text" name="textfield" 1d="textfield" /> 
<button type="submit"> 登 录 </button> 
<div class="spacer"></div> 
</form> 
</div> 








10.3 ”设计 文本 框 的 轮廓 线 


10.2.4 ”设置 轮廓 样式 


CSS3 为 轮 序 定义 了 很 多 属性 ， 借 助 这 些 属性 可 以 设置 多 样 的 轮廓 线 样式 。 
1. 设置 宽度 


outline-width 属性 可 以 单独 设置 轮廓 线 的 宽度 。 该 属性 的 基本 语法 如 下 。 





outline-width:thin | medium | thick | <length> | Inherlt: 


outline-width 属性 初始 值 为 medimmm， 适 用 于 所 有 元 素 。 取 值 简单 说 明 如 下 。 
thin: 定义 细 轮 廓 。 
medium: 定义 中 等 的 轮廓 。 
thick: 定义 粗 的 轮廓 。 
<length> : 定义 轮廓 粗细 的 值 。 
inherit: 默认 继承 。 
注意 ，outline-width 属性 设置 元 素 整个 轮廓 的 宽度 ， 只 有 当 轮 廓 样式 不 是 none 时 ， 该 属性 才 会 
起 作用 。 如 果 样 式 为 none， 宽 度 实 际 上 会 重 置 为 0。 不 允许 设置 负 长 度 值 。 


2. 设置 样式 
outline-style 属性 可 以 设置 轮廓 线 的 样式 。 该 属性 的 基本 语法 如 下 。 


和 多 的 的 的 


outline-style:auto | <border-style> | inhenit; 


outline-style 属性 的 初始 值 为 none， 适 用 于 所 有 元 素 。 取 值 简单 说 明 如 下 。 
加 ”auto: 根据 浏览 器 自动 设置 。 


Sd 
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加 ”<border-style>: 沿用 边框 样式 ， 包 括 none、dotted、dashed、solid、double、groove、Tidge、 
inset、outset。 详 细 说 明 请 参阅 CSS3 参考 手册 。 

加 ”inherit: 默认 继承 。 

该 属性 的 浏览 器 兼容 性 与 outline-width 属性 相同 。 

3. 设置 颜色 


outline-color 属性 可 以 单独 设置 轮 廊 线 的 颜色 。 该 属性 的 基本 语法 如 下 。 





outline-color:<color> | Invert | Inherlt: 


outline-color 属性 的 初始 值 为 nvert， 适 用 于 所 有 元 素 。 取 值 简单 说 明 如 下 。 
加 ”<color>: 可 以 是 颜色 名 ， 如 red， 也 可 以 是 函数 值 ， 如 rgb(255,0,0)， 或 者 是 十 六 进 制 值 ， 
如 #ft0000 。 

四 invert: 执行 颜色 反 转 〈 逆 同 的 颜色 )。 这 样 可 以 确保 轮廓 线 在 不 同 的 背景 颜色 中 都 是 可 见 的 。 

回 ”inherit， 默认 继 承 。 

注意 ， 轮 廓 的 样式 不 能 是 none， 否 则 轮廓 不 会 出 现 。 该 属性 的 浏览 器 兼容 性 与 outline-width 属 
性 相同 。 

4. 设置 偏 移 

outline-offset 属性 可 以 单独 设置 轮廓 线 的 偶 移 位 置 。 该 属性 的 基本 语法 如 下 。 


outline-offset:<length> | Inherlt: 


outline-offset 属性 初始 值 为 0， 适 用 于 所 有 元 素 。 取 值 简单 说 明 如 下 。 

名 ”<length>: 定义 轮廓 距离 容器 的 值 。 

MM inherit: 默认 继承 。 

该 属性 的 浏览 器 兼容 性 与 outline-width 属性 相同 。 

【示例 1】 在 上 节 示 例 的 基础 上 ， 通 过 outline-offset 属性 放大 轮廓 线 ， 使 其 看 起 来 更 大 方 ， 代 码 
如 下 ， 演 示 效 果 如 图 10.4 所 示 。 


<style type= "text/css"> 

body {/* 统 一 页 面 字 体 和 大 小 */ 
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arlal, Helvetica, sans-serif: 
font-slze:12PpX: 

} 

旋 清 除 常用 元 素 的 边界 、 补 白 、 边 框 默认 样式 */ 

p; hl, form, button { border:0; margin:0:;padding:0;} 

记 定 义 一 个 强制 换行 显示 类 */ 

.spacer {clear:both; height: 1px;} 

必定 义 表单 外 框 样式 */ 

.myform { margin:0 auto: width:400px: padding:14px:} 


i 
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谍 定 制 当前 表单 样式 */ 
#stylized {border:solid 2px #b7ddf2:; background:#ebf4fb:} 
谍 设 计 表 单 内 div 和 op 通用 样式 效果 */ 
#stylized hl {font-size:14px: font-welght:bold: margin-bottom:8px:;} 
#stylizedp { 
font-size:1 1px; color:#666666; 
margin-bottom:20px; padding-bottom:10px; 
border-bottom:solid 1px #b7ddf2:; 


} 

#stylized label {/* 定 义 表单 标 签 样式 */ 
display:block: float:left: 
font-weight:bold: text-align:right: 
width:140px; 

} 


#stylized .small {/* 定 义 小 字体 样式 类 */ 
color:#666666;: font-slze:11px: font-welght:normal: text-align:right; 
display:block: width:140px: 


} 
#stylized input {/* 统 一 输入 文本 框 样式 */ 
float:left: width:200px; 
font-size:12px; 
padding:4px 2px; margin:2px 0 20px 10px; 
border:solid 1px #aacfe4; 
} 
#stylized button {/* 定 义 图 形 化 按钮 样式 */ 
clear:both: 
margin-left:1 SOpx:; 
wldth:12Spx: height:3 1px;: 
background:#666666 url(1mages/button.png) no-Tepeat': 
text-allgn:center: line-height:3 1px; color:#FFFFFF: font-slze:11px: font-welght:bold: 
} 
上 # 设 计 表 单 内 文本 框 和 按钮 在 被 激活 和 获取 焦点 状态 下 时 ， 轮 廓 线 的 宽 、 样 式 和 颜色 装 


input:focus, button:focus { outline: thick solid #b7ddf2 } 
input:active, button:active { outline: thick solid #aaa } 
/# 通 过 outlineoffset 属性 放大 轮廓 线头 

input:active, button:active { outline-offset: 4px; } 
input:focus, button:focus { outline-offset: 4px: } 


</style> 
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<div 1d="stylized" class="myform"> 
<form 1d="form]1" name="form]1" method="post" action=""> 
全 让 : <hl> 登 录 </h1> 
| <p> 请 准确 填写 个 人 信息 .</p> 
<label>Name <span class="small"> 姓 名 </span> </label> 
<input type="text" name="textfield" 1d="textfield" /> 
<]label>Email <span class="small"> 电 子 邮 箱 </span> </label> 
<input type="text" name="textfield" 1d="textfield" /> 
<label>Password <span class="small"> 密 码 </span> </label> 
<input type= "text" name="textfield" 1d="textfield" /> 
<button type="submit"> 登 录 </button> 
<div class="spacer"></div> 
</form> 


</div> 





] localhost/mysite/test.ht x Wn ] localhost/mysite/test.ht x Wl 
@ [Dlocalhost/mysite/test.html Solk @ Dlocalhost/mysite/test.html 


登录 
请 准确 填写 个 人 信息 


Name 一 
姓名 | 张 三 | 


Email 


电子 由 入 


Password 
二 友 


[= ed 





上 | 
图 10.4 ”放大 激活 和 焦点 提示 框 
窑 提示 : 轮廓 线 可 以 与 边框 线 混用 ， 在 特定 情况 下 ， 可 以 使 用 轮廓 线 设计 边框 样式 ， 它 具有 以 下 


两 个 优点 。 
e 轮廓 不 占 空间 ， 即 不 会 增加 额外 的 width 或 者 height。 
e 轮 廊 有 可 能 是 非 矩 形 的 。 


【示例 2】 本 示例 将 为 段落 文本 中 的 部 分 文字 定义 轮廓 线 ， 代 码 如 下 ， 演 示 效 果 如 图 10.5 所 示 。 


<style type="text/css"> 

.outline { outline: red solid 2px:;} 

</style> 

<meta charset="utf-8"> 

<p><b> 注 释 : </b> 只 有 在 规定 了 !DOCTYPE 时 ，<span class="outline">Internet Explorer 8 《以 及 更 高 版 
本 ) </span> 才 支持 outline 属性 。</p> 
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图 10.5 轮廓 边框 效果 
10.2.5 ”定义 边框 背景 


CSS3 增加 了 border-image 属性 ， 来 模拟 background-image 属性 功能 ， 且 功能 更 加 强大 ， 该 属性 
的 基本 语法 如 下 。 





border-lmage:none | <Iimage> | <number> | <percentage>|{1,4} [/ <border-width>{1,4}| 


取 值 说 明 如 下 。 
四 “none: 默认 值 ， 表 示 边 框 无 背景 图 。 
加 ”<image>: 使 用 绝对 或 相对 URL 地 址 指定 边框 的 背景 图 像 。 
加 ”<number>: 设置 边框 宽度 或 者 边框 背景 图 像 大 小 ， 使 用 固定 像素 值 表 示 。 
加 ”<percentage>: 设置 边框 背景 图 像 大 小 ， 使 用 百分比 表示 。 
注意 ，border-image 属性 适用 于 所 有 元 素 ， 除 了 border-collapse 属性 值 为 collapse 的 table 元 素 。 
为 了 方便 灵活 使 用 , CSS3 人 允许 border-image 属性 复合 定义 边框 背景 样式 , 同时 还 派生 了 众多 子 属性 。 
一 方面 , CSS3 将 border-image 分 成 了 8 部 分 , 使 用 8 个子 属 性 分 别 定 义 特定 方位 上 边框 的 背景 图 像 。 
border-top-image: 定义 顶部 边框 背景 图 像 。 
border-right-image: 定义 右 侧 边框 背景 图 像 。 
border-bottom-image: 定义 底部 边框 背景 图 像 。 
border-left-image: 定义 左 侧 边 框 背 景 图 像 。 
border-top-left-image: 定义 左上 角 边 框 背 景 图 像 。 
border-top-right-image: 定义 右上 角 边 框 背景 图 像 。 
border-bottom-left-image: 定义 左下 角 边 框 背景 图 像 。 
border-bottom-right-image: 定义 右 下 角 边 框 背 景 图 像 。 
外 ， 根 据 边框 背景 图 像 的 处 理 功 能 ，border-image 属性 还 派生 了 以 下 几 个 属性 。 
border-image-source: 定义 边框 的 背景 图 像 源 ， 即 图 像 URL。 
border-image-slice: 定义 如 何 裁 切 背景 图 像 ， 与 背景 图 像 的 定位 功能 不 同 。 
border-image-repeat: 定义 边框 背景 图 像 的 重复 性 。 
border-image-width: 定义 边框 背景 图 像 的 显示 大 小 《〈 即 边框 显示 大 小 )。 虽 然 W3C 定义 了 
该 属性 ， 但 是 浏览 右 还 是 习惯 使 用 border-width 实现 相同 的 功能 。 
由 ”border-image-outset: 定义 边框 背景 图 像 的 偏 移 位 置 。 
Webkit 引擎 支持 -webkit-border-image 私有 属性 ，Mozilla Gecko 引擎 支持 -moz-border-image 私有 
属性 ，Presto 引擎 支持 -0o-border-image 私有 属性 。 正 浏览 器 暂时 不 支持 border-image 属性 ， 也 没有 定 
义 私有 属性 。 
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border-image 属性 与 background-image 属性 的 用 法 相似 , 包括 图 像 源 、 剪 裁 位 置 和 重复 性 。 例 如 ， 
border-image:url(01.jpg) 50 no-repeat: 样 式 就 表示 设置 边框 背景 图 像 为 01.jpg， 剪 裁 位 置 为 SOpx， 禁 止 
重复 。 

【示例 1】 为 元 素 边框 定义 背景 图 像 为 images/borderl.png， 然 后 设置 border-imageslice 属性 值 为 
(27 27 27 27)， 该 属性 值 可 以 简写 为 27。 整 个 示例 的 代码 如 下 ， 页 面 浏览 效果 如 图 10.6 所 示 。 


<style type="text/css"> 

dv { 
height: 1 60px:; 
border-width:27px:; 
话 设 置 边框 背景 图 像 */ 
-webkit-border-image: url(images/borderl.png) 27; /* 兼 容 Webkit 引 警 */ 
-moz-border-image: url(images/borderl.png) 27; /*# 兼 容 Gecko 引 警 */ 
-0-border-image: Url(images/border1.png) 27; /*# 兼 容 Presto 引擎 */ 
border-image: url(images/border1.png) 27; /* 兼 容 标 准 用 法 */ 

} 

</style> 

<div></div> 


| localhost/mysite/test.ht! x 





CC localhost/mysite/test.html 





图 10.6 定义 边框 背景 样式 


【示例 2】border-image 是 一 个 非常 实用 的 属性 ， 它 拓展 了 设计 师 的 设计 灵感 ， 抛 弃 了 传统 借助 
背景 图 像 实现 边 角 设计 的 牺 拙 做 法 ， 提 高 了 网 页 传输 速度 ， 降 低 了 前 期 劳动 量 。 本 示例 演示 了 如 何 
设计 局 部 或 者 全 部 圆 角 版 块 ， 代 码 如 下 ， 演 示 效 果 如 图 10.7 所 示 。 


<style type="text/css"> 
div { 
height: 120px; 
border-width: 10px:; 
-moz-border-i1mage: url(images/r2.png) 20; 
-webkit-border-1mage: url(images/r2.png) 20; 
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-0-border-1mage: url(1mages/r2.png) 20; 
border-1mage: url(images/r2.png) 20; 
} 


</style> 
iiidiw 





DD localhost/mysite/test1.h x 到 
€ SC Dlocalhost/mysite/test1.html 











10.7 定义 边框 圆 角 样式 
【示例 3】 设 计 圆 环 边框 版 块 。 显 示 效 果 如 图 10.8 所 示 。 : 


<style type="text/css"> 

div{ 
height: 120px:; 
border-wldth:10px: 
-moz-border-i1mage: url(images/r3.png) 20; 
-webkit-border-i1mage: url(1mages/r3.png) 20; 
-0-border-lmasge: url(images/r3.png) 20; 
border-1mage: url(images/r3.png) 20; 

} 

</style> 

<div></div> 


上 localhost/mysite/test2.P x Wo 
€ 3 © (localhost/mysite/test2.html 











10.8 定义 边框 圆 环 角 样 式 
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【示例 4】 设 计 阴 影 效果 。 代 码 如 下 ， 显 示 效 果 如 图 10.9 所 示 。 


<style type="text/css"> 

img { 
height:400px:; 
border-width:2px Spx 6px 2px; 
-moz-border-i1mage: url(images/r4.png) 2562; 
-webkit-border-i1mage: url(images/r4.png) 2562; 
-0-border-image: url(images/r4.png) 2562; 
border-i1mage: url(images/r4.png) 2562; 

} 

</style> 

<img src="images/2.jp2" /> 


- localhost/mysite/test3.h x 最 


@ | localhost/mysite/test3.html 





图 10.9 设计 阴影 效果 
【示例 5】 设计 选项 卡 。 代 码 如 下 ， 显 示 效 果 如 图 10.10 所 示 。 


<style type="text/css"> 


ul 
margin:0; 
padding:0; 
list-style-type:none; 

} 

ht 
width:100px; 
height:20px: 
float:left: 
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第 10 章 使 用 HTML5+CSS3 设计 网 页 





padding:4px 0; 

text-allgn:center: 

border-width:Spx Spx 0PpxX: 
-moz-border-i1mage: url(images/r6.png) $ $5 0; 





-webkit-border-i1mage: url(images/r6.png) $5 5 0; 
-0-border-1mage: url(images/r6.png) 5 5 0; 
border-1mage: url(images/r6.png) 5 3 0; 

} 

</style> 

<ul> 
<]> 首 页 </li> 
<]i> 微 博 </li> 
<] 拉 团购 </li> 

</ul> 





localhost/mysite/test4.h x 


© Dlocalhost/mysite/test4.html 灾 | 感 





图 10.10 设计 选项 卡 


注意 ， 如 果 border-image-slice 属性 值 包含 3 个 参数 ， 则 第 1 个 参数 表示 顶部 裁 切 值 ， 第 2 个 参 
数 表 示 左 右 两 侧 裁 切 值 ， 第 3 个 参数 表示 底部 裁 切 值 。 例 如 ，border-image-slice:55 0; 等 同 于 border- 
image-slice:5 5 0 5;， 它 表示 把 背景 图 像 的 项 部 、 右 侧 、 左 侧 裁 切 部 分 ， 搬 部 没有 裁 切 ， 然 后 把 背景 
图 像 分 为 6 块 ， 分别 填充 到 左上 角 、 顶 边 、 右 上 角 、 左 边 、 中 间 内 容 区 域 和 右边 。border-image 属性 
的 应 用 比较 灵活 ， 可 以 设计 不 同样 式 的 背景 图 ， 然 后 设置 不 同 的 border-image-slice 属性 值 ， 从 而 设 
计 各 种 特殊 的 边框 样式 。 


103 案例 实战 


下 面 结 合 案例 介绍 如 何 使 用 CSS 编排 HIMLS 文档 版 式 。 


10.3.1 设计 HTML5 文档 居中 显示 


要 实现 文本 、 行 内 元 素 水 平 居中 显示 ， 可 以 使 用 text-align:center; 声 明 ， 而 要 实现 块 状元 素 水 平 bit 
居中 显示 ， 可 以 使 用 margin-right:auto;margin-left:auto: 声 明 。 
【示例 1】 本 示例 演示 HIMLS 文档 居中 显示 的 实现 过 程 。 
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Csss1DN m 页 样式 与 布局 从 入 门 到 精通 ( 微 课 精 编 版 ) 





第 1 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 testl.html， 在 <body> 标 签 内 输入 以 下 代码 ， 设 


。 计 网 页 包含 框 。 
] <div 1d="page"></div> 
第 2 步 ， 复 制 10.1.8 节 示 例 的 HTML5 文档 结构 代码 ， 放 入 到 <div id="page"> 标 签 内 。 
第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 
的 样式 。 

body { 
padding: 0; 此 清除 页 边 距 */ 
margin: 0; /* 清除 页 边 距 */ 
text-align: center: /# 网 页 居中 显示 (下 浏览 器 有 效 ) */ 

} 

div#page  {l* 网 页 外 套 的 样式 */ 
margin-left:auto: /# 左 侧 边界 自动 显示 */ 
margin-right:auto: 诺 右 侧 边界 自动 显示 */ 
text-align:left: /# 恢复 网 页 文本 居 左 显示 */ 
border:solid 1px red; 上 # 定义 边框 ， 方 便 观察 ， 可 以 不 定义 */ 
width:90%; 上 # 固定 宽度 ， 只 有 这 样 才 可 以 实现 居中 显示 效果 */ 

} 


第 4 步 ， 保 存 页 面 ， 在 浏览 器 中 预 宽 ， 可 以 看 到 网 页 包含 框 导 中 显示 ， 如 图 10.11 所 示 。 


一 El SS http://localhost8080/mysite/test1.html ”名 GC | localhost x 


WwW3C 中 国 区 会 员 沙龙 在 北京 航空 航天 大 学 举行 


2017 年 9 月 14 日 ，W3C 在 北京 航空 航天 大 学 举办 了 中 国 区 会 员 沙 龙 活动 ， 向 到 会 的 中 国 区 会 员 代表 介绍 W3C 
目前 标准 工作 进展 及 计划 ， 并 提供 一 个 新 老 朋 友 茎 与 W3C 及 其 他 相关 话题 问答 与 互动 讨论 的 交流 平台 。 


最 新 新 闻 


。W3C 发 布 ODRL 信 息 模 型 、ODRL 词 汇 表 及 表达 两 份 候 选 推荐 标准 征集 参考 实现 及 审阅 意见 
。W3C 技 术 研讨 会 ，Web 虚 拟 现实 编著 一 机 遇 与 挑战 
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W3C 官 方 博客 
图 10.11 设计 网 页 居中 显示 的 基本 方法 


CSS 的 margin 属性 包含 auto 值 ，auto 是 一 个 目 动 计 算 的 值 ， 该 值 一 般 为 0， 也 可 以 为 其 他 值 ， 
这 主要 由 浏览 器 来 确定 。 
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第 10 章 使 用 HTML5+4CSS3 设计 网 页 一 有 


会 提示 : 设计 网 页 居中 布局 时 ， 应 注意 以 下 两 个 问题 。 
第 一 ,不 同 浏览 器 对 于 布局 居中 的 支持 是 不 同 的 。 例如， 对 于 于 浏览 器 来 说 ， 如 果 要 设 
计 网 页 居中 显示 ， 则 可 以 为 包含 框 定 义 text-align:center: 声 明 ， 而 非 正 浏览 器 不 支持 该 种 
功能 。 如 果 能 够 实现 兼容 ， 只 要 使 用 margin 属性 ， 同 时 设置 左右 两 侧 边界 为 自动 (anuto ) 





即 可 。 
第 二 ， 要 实现 网 页 居中 显示 ， 就 应 该 为 网 页 定义 宽度 ， 且 宽度 不 能 为 100%， 否则 看 不 到 
居中 显示 的 效果 。 


【示例 2】 示例 1 中 网 页 居中 设计 技巧 适合 普通 网 页 。 但 是 ， 如 果 设 计 网 页 浮动 显示 ， 则 居中 样 
式 就 失去 了 效果 。 例 如 ， 在 上 面 示例 的 基础 上 ， 为 <div id="page"> 包 含 框 添加 浮动 样式 ， 代 码 如 下 。 


#page {float:left: }/* 包含 框 浮动 显示 */ 
页 显示 效果 如 图 10.12 所 示 。 


站 内 新 闻 


se。 HTML5 
e。 CSS3 
。 JavaScript 


3C 
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10.12 ”网 页 居中 失效 


解决 方法 如 下 。 
在 网 页 包含 框 内 再 里 一 层 包含 框 ， 设 计 外 套 流 动 显示 ， 内 套 浮 动 显 示 。 有 具体 代码 如 下 ， 预 览 效 
果 如 图 10.13 所 示 。 


<style type="text/css"> 
body { 

padding: 0; 庆 清除 页 边 距 */ 

margin: 0; /* 清除 页 边 距 */ 

text-align: center: /# 网 页 居中 显示 (下 浏览 器 有 效 ) */ 
} 
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ee 网 页 样式 与 布局 从 入 门 到 精通 ( 微 课 精 编 版 ) 





Ee 


div#wrap {/* 网 页 外 套 的 样式 */ 


margin-left: auto: /# 左 侧 边界 自动 显示 */ 
margin-right: auto: 诺 右 侧 边界 自动 显示 */ 
text-align: left: /# 网 页 正文 文本 居 左 显示 */ 
border: solid 1px red: /# 定义 边框 ， 方 便 观察 ， 可 以 不 定义 */ 
width: 90%; 上 # 弹性 宽度 ， 只 有 这 样 才 可 以 实现 居中 显示 效果 */ 
div#page {/* 网 页 内 套 的 样式 */ 
width: 100%; 上 # 显示 定义 100% 宽 度 ， 以 便 与 外 套 同 宽 */ 
float: left: /# 浮动 显示 */ 
} 
</style> 
<div 1d="wrap"> 
<div id="page"> 网 页 内 套 </div> 
</div> 


~ @C | Elocalhost x 
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图 10.13 ”让 浮动 页 面 居 中 显示 


【示例 3】 本 示例 演示 定位 页 面 如 何 实现 居中 显示 。 

定位 布局 相对 复杂 ， 要 实现 居中 显示 ， 可 以 借助 内 外 两 个 包含 框 来 实现 ， 设 计 外 框 为 相对 定位 ， 
内 框 为 绝对 定位 显示 。 这 样 内 框 将 根据 外 框 进行 定位 ， 由 于 外 框 为 相对 定位 ， 将 遵循 流动 布局 的 特 
征 进行 布局 。 页 面 主要 CSS 样式 代码 如 下 。 


<style type="text/css"> 
div#wrap{/* 网 页 外 套 的 样式 */ 
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TU 


margin-left:auto:; 
margin-right:auto:; 
text-align:left: 
border:solid 1px red: 
width:80%: 
position:relative: 

} 

div#page {/* 网 页 内 套 样 式 */ 

width:100%: 
position:absolute: 

} 

</style> 


<div 1d="wrap"> 


<div id="page"> 网 页 内 套 </div> 


</div> 


第 10 章 使 用 HTML5+CSS3 设计 网 页 


设计 HTML5 文档 弹性 显示 


边界 可 以 设置 为 百分比 ， 百 分 比 的 取 值 是 根据 父 元 素 宽度 来 计算 的 。 使 用 百分比 的 好 处 是 能 
使 页 面 自 适 应 窗口 大 小 ， 并 能 够 及 时 调整 边界 宽度 。 从 这 点 考虑 ， 选 用 百分比 具有 更 大 的 灵活 性 和 
更 多 的 使 用 技巧 。 





诬 左 侧 边 界 自动 显示 */ 

谍 右 侧 边界 自动 显示 */ 

/# 网 页 正文 文本 居 左 显示 */ 

/# 定义 边框 ， 方 便 观察 ， 可 以 不 定义 */ 

/# 液态 宽度 ， 只 有 这 样 才 可 以 实现 居中 显示 效果 */ 
谍 定义 网 页 外 框 相对 定位 ， 设 计 包 含 块 */ 





/#* 与 外 套 同 宽 */ 
/# 绝对 定位 */ 





Psst 
. 一 


【示例 】 继 续 以 上 节 示 例 的 HIMLS 文档 结构 为 基础 ， 本 示例 通过 margin 取 值 百分比 定义 弹性 布 


<style type="text/css"> 


body { 
padding: 0; 
margin: 0; 
} 


div#page {/* 网 页 样式 */ 
margin-left: $%; 
margin-right: $5%: 
padding:12px; 
background:rgba(0,0,200,.2) 

} 

</style> 


局 页 面 ， 代 码 如 下 ， 效 果 如 图 10.14 所 示 。 


/*# 清除 页 边 距 */ 
此 清除 页 边 距 */ 


谍 左 侧 边界 */ 

谍 右 侧 边界 */ 

/# 增加 页 边 距 */ 

/# 增加 网 页 背景 色 ， 以 方便 观察 */ 
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图 10.14 弹性 布局 效果 


在 上 面 的 示例 中 ， 把 所 有 边界 都 设置 为 百分比 ， 这 样 当 窗 口 发 生变 化 时 ， 显 示 内 容 也 比较 得 体 
地 成 比例 变化 ， 不 至 于 当 窗 口 很 小 时 ， 段 落 文本 所 占 区 域 比例 很 大 ， 当 窗口 很 大 时 ， 段 落 文本 所 占 
区 域 比例 又 显 小 气 。 边 界 的 随机 应 变 使 页 面 显 得 更 灵活 。 


< 拟 注意 : 如 果 父 元 素 的 宽度 发 生变 化 ， 则 边界 宽度 也 会 随 之 变化 ， 整 个 版 面 可 能 会 混乱 ， 因 此 在 
综合 布局 时 要 慎重 选择 。 不 过 在 结构 单纯 、 内 容 单一 的 布局 中 ， 适 当 使 用 会 使 页 面 更 具 
人 性 化 和 多 变 效果 。 


10.3.3 ”调整 HTML5 栏目 显示 顺序 


et 下 面 利用 margin 取 负 值 的 设计 技巧 来 实现 栏目 位 置 的 调换 显示 。 本 例 继续 以 上 一 节 的 HTML5 
视频 讲解 文档 结构 为 基础 进行 练习 。 

【操作 步骤 】 

第 1 步 ， 新 建 HTML5 文档 ， 保 存 为 testL html， 复 制 上 节 示 例 的 文档 结构 。 首 先 ， 对 其 结构 进 
行 优 化 ， 代 码 如 下 ， 优 化 的 目的 是 方便 使 用 float 实现 多 列 布局 。 





<div 1d="page"> 
<header> 
<nav> 
<ul> 
<]i><a hre 伍 #"> 首 页 </a></li> 
<]i><a hre 伍 "#"> 站 内 新 闻 </a></li> 
<li><a hre 伍 "#"> 站 外 新 闻 </a></li> 
</ul> 
</nav> 
</header> 
<main> 


<hl> 站 内 新 闻 </h1> 
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在 重 构 过 程 中 ， 我 们 没有 破坏 原 有 文档 结构 ， 仅 对 <main> 结 构 进 行 分 组 ， 分 别 使 用 <article> 和 
<aside> 包 里 住 文章 块 和 侧 栏 栏 目 ， 这 样 方便 使 用 CSS 进行 控制 。 
第 2 步 ， 设 计 页 面 居 中 显示 ， 并 定义 页 面 宽度 为 960 像素 ， 为 下 面 操 作 提 供 方 便 ， 代 码 如 下 。 


。345 。 
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body { 
padding: 0; /# 清除 页 边 距 */ 
margin: 0; /# 清除 页 边 距 */ 
text-align: center: /* 网 页 居中 显示 (IE 浏览 器 有 效 ) */ 
} 
div#page {/* 网 页 外 套 的 样式 */ 
margin-left: auto: 谍 左 侧 边界 目 动 显示 */ 
margin-right: auto: /# 右 侧 边界 自动 显示 */ 
text-align: left: 人/# 恢复 网 页 文本 居 左 显示 */ 
width: 960px: /# 固定 宽度 ， 只 有 这 样 才 可 以 实现 居中 显示 效果 */ 
} 
第 3 步 ， 设 计 标题 栏 样式 。 先 清除 列表 结构 的 默认 样式 ; 然后 设计 菜单 项 浮动 显示 ， 设 计 导 航 


条 效果 ; 最 后 使 用 伪 对 象 选择 器 在 标题 栏 容器 尾部 增加 一 个 空 对 象 ， 让 其 以 块 显 示 ， 并 清除 左右 两 
侧 浮 动 ， 这 样 能 够 强迫 标题 栏 撑 开 显示 ， 代 码 如 下 。 


header nav ul {/* 清除 默认 样式 */ 
padding: 0; margin: 0; 
list-style-type: none; 


} 

header nav ul 1i {/* 回 左 浮动 显示 */ 
float: left: 
width: 100px: height: 40px: 谍 固定 高 度 和 宽度 */ 
line-height: 40px: /# 垂直 居中 显示 */ 
text-align: center: 谍 水 平 居 中 显示 */ 

} 

header nav:after { /* 撑 开 标题 栏 */ 
content: "": /# 添加 空 对 象 */ 
display: block: /# 块 显示 */ 
clear: both: /# 清除 左右 浮动 */ 

} 

第 4 步 ， 设 计 <nav>、<article>、<aside>3 个 栏目 同 左 浮 动 显 示 ， 并 固定 宽度 ; 然后 隐藏 不 需要 


的 标题 文本 ; 最 后 在 <main> 尾 部 添加 一 个 空 对 象 ,定义 块 显示 ,清除 左右 浮动 ,目的 是 为 了 撑 开 <main> 
容 费 ， 代 码 如 下 。 

main nav, main article, main aside { float: left: } /# 定义 三 栏 浮动 显示 */ 

谍 定义 三 栏 固定 宽度 */ 

main nav { width: 200px: } 

main article { width: 460px: } 
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第 5 步 ， 设 计 脚 注 区 块 样式 ， 并 为 标题 栏 和 脚注 栏 增加 背景 色 ， 以 区 分 各 行 栏目 ， 代 码 如 下 。 
此 时 ， 页 面 显示 效果 如 图 10.15 所 示 。 


W3C 中 国 区 会 员 沙龙 在 北京 航空 航天 大 学 举行 


2017 年 9 月 14 日 ， 人 员 沙 龙 。 
活动 ， 向 到 会 的 中 国 区 会 员 代表 介绍 W3C 目前 标准 工作 进展 及 计 
新 才 朋友 全 与 W3C 及 其 他 相关 话题 问答 与 互动 讨 


。W3C 心 
人 1 1 版 公 革 推荐 标准 征集 参考 


W3C 官 方 博客 | 


。W3C 启 动 W 工作 组 
; W3C 据 的 不 来 关 向 
。W3C 数 字 出 版 主要 进展 


nn 
10.15 ”初步 完成 页 面 布局 ! 


第 6 步 ， 把 testl.html 另存 为 test2.html， 然 后 在 test2.html 文档 的 内 部 样式 表 中 添加 如 下 样式 。 
注意 ， 要 正确 计算 margin 的 设置 值 。 ' 








i 


本 起 , De (sss1DN0 网 页 样式 与 市 局 从 入 门 到 精通 ( 微 课 精 编 版 ) 


一 -一 


] 通过 CSS 的 margin 调整 <nav>、<article>、<aside>3 个 栏目 的 显示 顺序 ， 则 演示 效果 如 图 10.16 
”所 示 。 


3 | (+)* | @ http://localhost8080/mysite/test2.html -时 龟 localhost x 
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。W3C 技 术 研讨 会 ，Web 庶 拟 现实 编 “ 论 的 交流 全 。 
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10.16 ”margin 取 负 值 时 的 布局 效果 
10.3.4 禁止 HTML5 栏目 错 行 显示 


在 复杂 的 页 面 设计 中 ， 用 户 可 能 需要 在 设计 好 的 页 面 中 添加 边框 、 补 白 、 边 界 等 样式 ， 此 时 就 
会 破坏 整个 页 面 结构 。 

【示例 】 以 上 节 示 例 为 例 进行 说 明 ， 我 们 需要 为 中 间 3 栏 添加 padding， 以 避免 栏目 内 容 挤 在 一 
起 。 同 时 为 了 看 清 每 个 栏目 的 边界 ， 再 为 每 个 栏目 添加 一 个 边框 线 ， 代 码 如 下 。 





main nav, main article, main aslde { 
border: solid 1px red: /# 增加 边框 线 ， 方 便 观 察 */ 
padding: 12px; /# 增加 栏目 之 间 空 隙 */ 

} 


在 浏览 器 中 预览 ， 显 示 效 果 如 图 10.17 所 示 。 
去 一 > 由 -| 展 http://localhost:8080/mysite/test1.html -Co 


* ED W3C 中 国 区 会 员 沙 万 在 北京 航空 航 大 大 学 举行 


* JavaScript 2017 年 9 月 14 日 ，W3C 在 北京 航空 航天 大 学 举办 了 中 国 区 会 员 沙龙 
活动 ， 向 到 会 的 中 国 区 会 员 代 表 介 绍 W3C 目前 标准 工作 进展 及 计 
六 于 扣 从 个 新 老 肝 友人 与 W3C 及 其 他 相关 话题 问答 与 互动 讨 


论 允 








最 新 新 闻 


。W3C 发 布 ODRL 信 息 模型 、ODRL 词 
汇 表 及 表达 两 份 候选 推荐 标准 征集 参 
考 买 现 及 


审阅 意见 
。W3C 技 术 研 讨 会 ，Web 虚 拟 现实 编 
著 一 机 过 与 挑战 
，。W3C 发 布 核心 无 障碍 API 映 射 
AAM) 1 1 版 民选 推荐 标准 征集 参 夫 
实现 





扯 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 


10.17 浮动 错 行 问题 
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分 析 原 因 : 在 修改 布局 前 后 ， 没 有 考虑 到 CSS 盒 模 型 对 布局 的 影响 。 
如 果 不 怕 麻 烦 ， 可 以 调整 CSS 样式 代码 ， 修 改 每 行 每 列 的 宽度 ， 确 保 每 行 总 宽度 不 大 于 包含 框 


的 宽度 。 . a 3 
把 testl.html 另存 为 test2.html， 然 后 在 test2.html 文档 的 内 部 样式 表 中 添加 如 下 样式 ， 为 每 个 栏 一 
目 框 定义 box-sizing: border-box:。 





main nav, main article, main aside { 

border: solid 1px red; 

padding: 12px; 

box-sizing: border-box; /* 以 怪异 模式 解析 ， 这 样 width 可 以 包含 border 和 padding */ 
} 


重新 在 浏览 器 中 预览 ， 则 布局 效果 如 图 10.18 所 示 。 关 于 box-sizing 属性 的 说 明 可 以 参考 10.2.1 
节 内 容 。 
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进展 及 计划 ， 村 得 站 新 坟 关 友和 参与 W3C 及 其 他 相关 话题 问 荐 标准 征集 参考 实现 及 审阅 音 见 
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图 10.18 ”改善 浮动 布局 错 行 问题 
10.3.5 ”设计 HTML5 多 栏 等 高 显示 


在 多 栏 布 局 中 ， 由 于 每 个 栏目 内 容 高 度 不 一 致 ， 会 出 现 栏目 高 度 参差 不 齐 的 现象 。 
【示例 1】 以 上 节 示 例 为 例 进行 说 明 。 
第 1 步 ， 把 test2.html 另存 为 testl.html， 然 后 在 testl.html 文档 的 内 部 样式 表 中 添加 如 下 样式 ， 
为 <nav>、<article>、<aside>3 个 栏目 定义 不 同 的 背景 色 ， 同 时 清除 border: solid 1px red: 声 明 。 





main nav { background: rgba(0,255,255,0.2); } 
main article { background: rgeba(255,255,0,0.2); } 
main aslde { background: rgba(255,0,255,0.2); } 


第 2 步 ， 在 浏览 器 中 预览 ， 效 果 如 图 10.19 所 示 。 
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* JavaScnipt 2017 年 9 月 14 日 ，W3C 在 北京 航空 航天 大 学 举办 了 中 国 区 会 员 
沙龙 活动 ， 向 到 会 的 中 国 区 会 员 代 表 介绍 W3C 目前 标准 工作 
进展 及 计划 ， 并 提供 一 个 新 者 朋友 参与 W3C 及 其 他 相关 话题 问 
答 与 互动 讨论 的 交流 平台 。 


(Cere AAM) 1.1 版 候选 推荐 标 
准 征集 参考 实现 
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图 10.19 栏目 高 度 不 一 致 
为 了 解决 3 栏 高 度 不 齐 的 问题 ， 下 面 介 绍 两 种 方法 。 
方法 一 : 使 用 伪 列 布局 。 所 谓 伪 列 布局 ， 就 是 设计 一 个 背景 图 像 ， 利 用 背景 图 像 来 模拟 栏目 的 
背景 (方法 二 见 示 例 2)。 
第 3 步 ， 以 上 节 示 例 结构 为 基础 ， 使 用 Photoshop 设计 一 个 长 条 形 的 背景 图 ， 长 度 与 页 面 宽 度 保 
持 一 致 ， 高 度 任意 ， 如 图 10.20 所 示 。 


10.20 ”设计 伪 列 布局 背景 图 像 
第 4 步 ， 为 <main> 包 含 框 定义 背景 图 ， 让 其 沿 y 轴 平 铺 ， 代 码 如 下 。 


maim{ 
background:url(images/bg.png) repeat-y: /# 伪 列 背景 图 像 ，y 轴 平 铺 */ 
float:left: 上 # 浮动 显示 ， 以 便 撑 开 main 容器 ， 显 示 背 景 */ 
width:1009%4: /# 满 页 显示 */ 

} 


第 $ 步 ， 为 了 避免 栏目 背景 色 的 和 干扰， 不 妨 在 CSS 样式 表 中 删除 各 个 栏目 背景 色 声 明 ， 同 时 删 
除 main:after 伪 对 象 样式 ， 该 对 象 会 影响 浮动 布局 背景 色 的 垂直 平 铺 ， 代 码 如 下 。 


main:after {/* 为 了 撑 开 main 框 ， 临 时 添加 伪 对 象 */ 
content: ""; 
display: block: 
clear: both:; 

} 

main nav { background: rgba(0,255,255,0.2): } 

main article { background: reba(255,255,0,0.2); } 

main aside { background: rgba(255,0,255,0.2); } 


DO 
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第 6 步 ， 为 footer 添加 clear:both:; 声 明 ， 防 止 页 脚 内 容 同 上 环绕 显示 ， 代 人 码 如 下 。 


footer { 
clear:both; 


} 


第 7 步 ， 以 上 操作 所 得 到 的 效果 如 图 10.21 所 示 ， 其 中 任何 一 个 栏目 高 度 发 生变 化 ， 都 会 撑 开 包 
含 框 ， 由 于 包含 框 main 的 背景 图 像 是 一 个 模拟 的 各 栏目 背景 色 ， 所 以 就 给 人 一 种 栏目 等 高 的 错觉 。 
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图 10.21 伪 列 布局 效果 


容 提示 : 在 使 用 这 种 方法 时 , 一 定 确保 页 面 宽度 是 固定 的 , 不 能 够 设计 为 弹性 页 面 ( 百分比 宽度 ) ， 
或 者 宽度 值 为 auto。 


【示例 2】 示例 1 使 用 固定 宽度 的 背景 图 像 设 计 伪 列 布局 ， 这 种 方法 存在 局 限 性 ， 本 例 使 用 CSS3 
渐变 背景 来 改善 这 种 设计 方法 ， 使 其 能 够 适应 弹性 页 面 显示 。 例 如 ， 针 对 示例 1， 修 改 main 包含 框 
的 background 属性 值 ， 使 用 linear-gradient0) 函 数 定义 直线 渐变 背景 图 像 ， 从 左 到 右 为 其 设计 3 个 色 
块 : 左 侧 200 像素 背景 色 为 reba(0,255,255,0.2)， 中 间 色 块 从 200 像素 到 660 像素 ， 背 景色 为 
rgba(255,255,0,0.2)， 右 侧 色 块 从 660 像素 开始 ， 背 景色 为 rgba(255,0,255,0.2)， 代 码 如 下 。 





mam{ 
background: linear-gradient(to right, rgba(0,255,255,0.2) 200px, rgba(255,255,0.,0.2) 0, rgeba(255,255,0,0.2) 
660px, rgba(255,0,255,0.2) 0); 
float:left: 
width:100%: 
} 
在 浏览 器 中 预 宽 , 效果 如 图 10.22 所 示 。 这 样 我 们 可 以 通过 设计 渐变 背景 的 色 标 位 置 为 自分 比值 ， 


来 适应 弹性 布局 的 页 面 。 
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图 10.22 伪 列 布局 效果 


【拓展 】 

男 一 种 解决 3 栏 高 度 不 齐 问 题 的 方法 是 使 用 补 白 和 边界 重合 法 ,这 种 方法 的 思路 是 : 设计 <nav>、 
<article>、<aside>3 个 栏目 的 底部 补 白 为 无 穷 大 ， 这 样 在 有 限 的 窗口 内 都 能 够 显示 栏目 的 背景 色 ， 因 
此 也 就 不 用 担心 栏目 高 度 无 法 自 适 应 。 为 了 避免 补 白 过 大 产生 的 空白 区 域 ， 再 设计 抵 部 边界 为 负 无 
穷 大 ， 从 而 履 盖 挥 多 出 来 的 补 白 区 域 ， 最 后 在 中 间 行 包含 框 中 定义 overflow:hidden: 声 明 剪 切 卸 多 出 
的 区 域 即 可 。 

把 test3.html 另存 为 test4.html， 将 下 面 样式 代码 放置 到 test4.html 示例 中 ， 并 删除 伪 列 布局 中 为 
<main> 标 签 定义 的 背景 图 像 ， 代 码 如 下 ， 此 时 可 以 得 到 如 图 10.23 所 示 的 效果 。 


main { overflow:hidden; }/* 前 切 多 出 的 区 域 */ 


main nav{ 
padding-bottom:9999px: 上/# 定义 底部 补 白 无 穷 大 */ 
Imargin-bottom:-9999px: /* 定义 底部 边界 负 无 穷 大 */ 
} 
main article { 
padding-bottom:9999px: /# 定义 底部 补 白 无 穷 大 */ 
margin-bottom:-9999px: 此 定义 底部 边界 负 无 穷 大 */ 
} 
main aslde { 
padding-bottom:9999px; 上 # 定义 底部 补 白 无 穷 大 */ 
margin-bottom:-9999px: /# 定义 底部 边界 负 无 穷 大 */ 
} 


main nav { background: rgba(0,255,255,0.2); } 
main article { background: reba(255,255,0,0.2); } 
main aslde { background: rgba(255,0,255,0.2); } 


“0. 
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首页 ”站 内 新 闻 站 外 新 闻 


© | 
" HIMLS W3C 中 国 区 会 员 沙龙 在 北京 航空 航天 大 学 举行 最 新 新 闻 


2017 年 9 月 14 日 ，W3C 在 北京 航空 级 天 大 学 举办 了 中 国 区 会 员 
沙龙 活动 ， 向 到 会 的 中 国 区 会 员 代表 介绍 W3C 自前 标准 工作 【RSC 发 布 ODRL 信 息 横 型 、 
进展 及 计划 ， 并 提供 一 个 新 老 朋 友 参 与 W3C 及 其 他 相关 话题 问 标准 征集 参考 实现 及 审阅 意见 
答 与 二 动 讨论 的 交 洲 平台 。 。WC 技 术 斌 讨 会 ， 矶 ct 庶 所 这 灾 
编著 二 机 秽 与 抓 战 


，W3C 发 布 核心 无 障碍 API 映 射 一 
(Core-AAM) 1.1 版 候选 推荐 标 
准 征集 参考 实现 


W3C 官 方 博客 
，W3C 启 翅 W 工作 组 
，W3C 弛 所 的 不 来 站 向 


本 站 由 北京 航空 航天 大 学 (W3C/Beihang) 维 护 京 ICP 备 05004617-3 文保 隐 支 备案 号 1101080018 





图 10.23 ”使 用 补 白 和 边界 重 苇 法 设计 自 适应 高 度 的 布局 


10.4 在 线 练 习 


1. 使 用 HTML 结构 标签 设计 各 种 网 页 模块 。 
2. 通过 练习 了 解 CSS3 布局 新 特性 。 
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使 用 CSS3 设计 弹性 布局 


2009 年 ，W3C 提出 一 种 革新 的 布局 方案 一 伸缩 盒 布 局 ， 它 可 以 简便 、 完 整 、 响 应 式 
地 实现 各 种 页 面 布局 ， 自 由 设置 多 个 栏目 在 一 个 容器 中 的 分 布 方式 ， 以 及 合理 处 理 容 器 内 
可 用 的 空间 。 使 用 该 模型 可 以 轻松 创建 自 适应 窗口 的 流动 布局 或 者 自 适 应 字体 大 小 的 弹性 
布局 。W3C 的 伸缩 盒 布 局 分 为 四 版 本 、 新 版 本 ， 以 及 混合 过 渡 版 本 3 种 不 同 的 编码 方式 。 
其 中 混合 过 渡 版 本 主要 是 针对 IE10 做 了 兼容 。 目 前 该 技术 多 应 用 在 移动 端 网 页 布局 ， 本 章 
将 主要 讲解 上 四 版 本 和 新 版 本 伸缩 盒 布 局 的 基本 用 法 。 

权威 参考 : http://www.w3.org/TR/css-flexbox-1/。 


【 学 习 要 点 】 

MI 设计 多 列 布局 。 

P| 设计 旧版 伸缩 盒 布局 。 
WI 设 计 新 版 伸缩 盒 布 局 。 


第 1] 章 使 用 CSS3 设计 种 性 布局 





11.1 多 列 布局 





CSS3 新 增 columns 属性 ， 用 来 设计 多 列 布局 ， 它 允 许 网 页 内 容 跨 栏 显 示 ， 适合 设计 正文 版 式 。 
权威 参考 : http://www.w3.org/TR/css3-multicol/。 


11.1.1 设置 列 宽 
column-width 属性 可 以 定义 单列 显示 的 宽度 ， 基 本 语法 如 下 。 





column-width: <length> | auto 


取 值 简单 说 明 如 下 。 

名 ”<length>: 用 长 度 值 来 定义 列 宽 。 不 允许 有 负 值 。 

四 auto: 根据 <column-count> 目 定 分 配 宽 度 ， 为 默认 值 。 

【 示例】 本 示例 演示 了 column-width 属性 在 多 列 布局 中 的 应 用 。 设 计 body 元 素 的 列 宽度 为 300 
像素 ， 如 果 网 页 内 容 能 够 在 单列 内 显示 ， 则 会 以 单列 显示 ; 如 果 窗 口 足 够 宽 ， 且 内 容 很 多 ， 则 会 在 
多 列 中 显示 ， 效 果 如 图 11.1 所 示 ， 根 据 窗口 宽度 自动 调整 为 两 栏 显 示 ， 列 宽度 显示 为 300 像素 ， 代 
人 码 如 下 。 


<style type="text/css"> 

放 定 义 网 页 列 宽 为 300 像素 ， 则 网 页 中 每 个 栏目 的 最 大 宽度 为 300 像素 */ 

body {column-width:300px;:} 

hl {color: #333333; padding: Spx 8px:font-slze: 20px:text-align: center; padding: 12px;} 
h2 {font-size: 16px:; text-align: center;} 

p {color: #333333; font-slze: 14px; line-height: 180%; text-indent: 2em:} 

</style> 


<hl>W3C 标准 </h1> 

<p>W3C 的 各 类 技术 标准 在 努力 为 各 类 应 用 的 开发 打造 一 个 <strong> 开 放 的 Web 平台 (Open Web Platform) 
</strong>。 尺 管 这 个 开放 Web 平台 的 边界 在 不 断 延 伸 ， 产 业界 认为 HIMLS 将 是 这 个 平台 的 核心 ， 平 台 的 能 力 
将 依赖 于 W3C 及 其 合作 伙伴 正在 创建 的 一 系列 Web 技术 ， 包 括 CSS，SVG，WOFF, 语义 Web， 及 XML 和 各 
类 应 用 编程 接口 (APIs) 。</p> 

<p> 截 至 2014 年 3 月 ，W3C 共 设 立 5 个 技术 领域 ， 开 展 23 个 标准 计划 。W3C 设 有 46 个 工作 组 (Working 
Group) 、14 个 兴趣 小 组 〈Interest Group) 、3 个 协调 组 〈Coordination Group) 、169 个 社区 组 (Community 
Group) ， 以 及 3 个 业务 组 (Business Group ) 。</p> 

<p> 目 前 ，W3C 正在 探讨 技术 专家 及 个 人 参与 W3C 标准 制定 过 程 的 Webizen 计划 ， 敬 请 期 待 。</p> 

<p>W3C 于 2014 年 11 月 发 布 了 题 为 &ldquo;W3C 工作 重点 (2014 年 11 月 ) ”的 报告 ， 这 是 最 新 的 一 份 对 
W3C 近期 开展 的 工作 要 点 进行 了 综述 的 文章 ， 阅 述 了 近期 的 工作 重点 和 优先 级 。</p> 


*355。 
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人 > *| 伯 http://localhost:8080/mysite/test.html ~ Cl Elocalhost X 


W3C 标 准 


W3C 的 各 类 技术 标准 在 努力 为 各 类 应 用 的 开发 打造 一 个 
开放 的 Web 平 台 (Open Web Platform〉。 尽 管 这 个 开放 Web 
平台 的 边界 在 不 断 延 伸 ， 产 业界 认为 HTMLS 将 是 这 个 平台 的 
核心 ,平台 的 能 力 将 依赖 于 W3C 及 其 合作 伙伴 正在 创建 的 一 
系列 Web 技 术 ， 包括 CSS, SVG, WOFF. 语义 Web ， 及 XML 和 
各 类 应 用 编程 接口 (APIs) 。 


11.1 


11.1.2 设置 列 数 





Xx 


i 丰 这 


截至 2014 年 3 月 ，W3C 共 设立 5 个 技术 领域 ， 开 展 23 个 标 
准 计划 。W3C 设 有 46 个 工作 组 (Working Group) 、14 个 兴趣 
小 组 《Interest Group) 、3 个 协调 组 《Coordination Group ) 、 
169 个 社区 组 (Community Group) ， 以 及 3 个 业务 组 
(Business Group ) 。 


目前 ，W3C 正 在 探讨 技术 专家 及 个 人 参与 W3C 标 准 制定 
过 程 的 Webizen 计 划 ， 茹 请 期 待 。 

W3C 于 2014 年 11 月 发 布 了 题 为 *W3C 工 作 重点 〈《2014 年 11 
月 ) "的 报告 ， 这 是 最 新 的 一 份 对 W3C 近 期 开展 的 工作 要 点 进 
行 了 综述 的 文章 ， 阐 述 了 近期 的 工作 重点 和 优先 级 。 


固定 列表 宽度 显示 


column-count 属性 可 以 定义 显示 的 列 数 ， 基 本 语法 如 下 。 


column-count: <integer> | auto 


取 值 简单 说 明 如 下 。 


加 ”<integer>: 用 整数 值 来 定义 列 数 。 不 允许 有 负 值 。 
回 ”auto: 根据 <' column-width 伟 自 定义 分 配 宽度 ， 为 默认 值 。 


【示例 】 在 11.1.1 节 示 例 的 基础 上 ， 如 果 定 义 网 页 列 数 为 3， 则 不 管 浏览 器 窗口 怎么 调整 ， 页 面 


内 容 总 是 遵循 3 列 布局 。 代 码 如 下 ， 演 示 效 果 如 图 11.2 所 示 。 
/* 定 义 网 页 列 数 为 3， 这 样 整个 页 面 总 是 显示 为 3 列 */ 


body { column-count:3;} 


4 


5; 


一 中 -| 龟 http://localhost:8080/mysite /test.html -OG 全 localhost x 


WOFF, 语义 Web， 及 XML 和 各 类 应 用 纺 
程 接 口 CAPIs) 。 


W3C 标 准 


截至 2014 年 3 月 ，W3C 共 设立 5 个 技 
术 领 域 , 开展 23 个 标准 计划 。W3C 设 有 
46 个 工作 组 《Working Group) 、14 个 兴 
趣 小 组 (Interest Group ) 、3 个 协调 组 
(Coordination Group ) 、169 个 社区 组 
《Community Group ) ， 以 及 3 个 业务 组 
《Business Group ) 。 


W3C 的 各 类 技术 标准 在 努力 为 各 类 
应 用 的 开发 打造 一 个 开放 的 Web 平 台 


(Open Web Platform ) 。 尽 管 这 个 开 
放 Web 平 台 的 边界 在 不 断 延伸 ， 产 业界 
认为 HTML5 将 是 这 个 平台 的 核心 ， 平台 
的 能 力 将 依赖 于 W3C 及 其 合作 伙伴 正在 
创建 的 一 系列 Web 技 术 ， 包 括 CSS. SVG. 





图 11.2 设计 3 列 显示 


“ 350 


目前 ，W3C 正 在 探讨 技术 专家 及 个 
人 参与 W3C 标 准 制定 过 程 的 Webizen 计 
划 ， 和 获 请 期 待 。 


W3C 于 2014 年 11 月 发 布 了 题 为 
“<W3C 工 作 重点 《2014 年 11 月 ) "的 报 
告 ， 这 是 最 新 的 一 份 对 W3C 近 期 开展 的 
工作 要 点 进行 了 综述 的 文章 ， 曾 述 了 近 
期 的 工作 重点 和 优先 级 。 


第 11 章 使 用 CSS3 设计 独 性 证 局 $9 : 


11.1.3 ”设置 间距 
column-gap 属性 可 以 定义 两 栏 之 间 的 间距 ， 基 本 语法 如 下 。 
column-gap: <length> | normal 


取 值 简单 说 明 如 下 。 
名 ”<length>: 用 长 度 值 来 定义 列 与 列 之 间 的 间 际 。 不 允许 有 人 负 值 。 
加 ”normal: 与 <font-size> 大 小 相同 。 假 设 该 对 象 的 font-size 为 1 6px， 则 normal 值 为 16px， 
依 此 类 推 。 
【示例 】 在 11.1.2 节 示 例 的 基础 上 ， 通 过 column-gap 和 line-height 属性 配合 使 用 ， 把 文档 版 面 设 
计 得 疏 朗 大方， 以 方便 阅读 。 其 中 列 间 距 为 3sam， 行 高 为 2.Sem， 页 面 内 文字 内 容 看 起 来 更 明晰 。 代 
码 如 下 ， 效 果 如 图 11.3 所 示 。 


body { 
谍 定 义 页 面 内 容 显示 为 3 列 */ 
column-count: 3; 
庆 定 义 列 间距 为 3am， 默 认为 lem*/ 
column-gap: 3em; 
line-height: 2.5em; /# 定义 页 面 文本 行 高 */ 








} 
Ce ed 中 -| 惰 http://localhost:8080/mysite/test.html 全 localhost 
Web 技 术 ， 包 括 CSS. SVG. 以 及 3 个 业务 组 (Business 
W3C 标 准 WOFF, 语义 Web， 及 XML 和 各 Group ) 。 
类 应 用 编程 接口 (APIs〉。 
目前 ，W3C 正 在 探讨 技术 专 

W3C 的 各 类 技术 标准 在 努力 截至 2014 年 3 月 ，W3C 共 设 家 及 个 人 参与 W3C 标 准 制定 过 程 
为 各 类 应 用 的 开发 打造 一 个 开放 立 5 个 技术 领域 ， 开 展 23 个 标准 的 Webizen 计 划 ， 籁 请 期 待 。 
的 Web 平 台 (Open Web 计划 。W3C 设 有 46 个 工作 组 生 11 月 发 布 一 
Platform ) 。 尽 管 这 个 开放 Web 《Working Group) 、14 个 兴趣 小 沪 ， et . 了 
平台 的 边界 在 不 断 延 伸 ， 产 业界 组 (Interest Group》、3 个 协调 组 和 
、 , | 月 ) "的 报告 ， 这 是 最 新 的 一 份 
认为 HTML5 将 是 这 个 平台 的 核 (Coordination Group )、169 个 、 _ 
、 | 对 W3C 近 期 开展 的 工作 要 点 进行 
心 ， 平台 的 能 力 将 依赖 于 W3C 及 社区 组 (Community Group ) ， Ce 
其 合作 伙伴 正在 创建 的 一 系列 了 经 壕 的 文章 ， 羡 壕 了 过 其 从 开 

| 作 重 点 和 优先 级 。 
图 11.3 设计 疏 朗 的 跨栏 布局 
SS 全 
11.1.4 设置 列 边 框 


column-rule 属性 可 以 定义 每 列 之 间 边 框 的 宽度 、 样 式 和 颜色 。 基 本 语法 如 下 。 


column-rule: <'column-rule-width > || <' column-rule-style > || <' column-rule-color > 


取 值 简单 说 明 如 下 。 


“i 

















CR (sss1DN0 网 页 样式 与 市 局 从 入 门 到 精通 ( 微 课 精 编 县 ) 


<' column-rule-width '>: 设置 对 象 的 列 与 列 之 间 的 边框 厚度 。 
<' column-rule-style >: 设置 对 象 的 列 与 列 之 间 的 边框 样式 。 
<' column-rule-color >: 设置 对 象 的 列 与 列 之 间 的 边框 颜色 。 


column-rule-style 属性 语法 如 下 ， 取 值 与 边框 样式 border-style 相同 。 
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | Inset | outset 


column-rule-width 与 border-width，column-rule-color 与 border-color 设置 相同 , 在 此 就 不 再 重复 说 明 。 
【 示例】 在 11.1.3 节 示 例 的 基础 上 ， 为 每 列 之 间 的 边框 定义 一 个 虚线 分 割 线 ， 线 宽 为 2 像素 ， 灰 
色 显 示 。 代 码 如 下 ， 演 示 效 果 如 图 11.4 所 示 。 


body { 
上 定义 页 面 内 容 显示 为 3 列 */ 
column-count: 3: 
谍 定 义 列 间距 为 3em， 默 认为 lem*/ 
column-gap: 3em; 
line-height: 2.Sem: 
此 定义 列 边框 为 2 像素 宽 的 灰色 虚线 */ 
column-rule: dashed 2px gray; 





} 
k 
去- Oe 全 太 这 
Web 技 术 ， 包 括 CSS. SVG。 ; 以 及 3 个 业务 组 〈(Business 
W3C 标 准 WOFF., 语义 Web， 及 XML 和 各 | Group ) ° 
类 应 用 编程 接口 (APIs〉。 | 时 ee 
目前 ，W3C 正 在 探讨 技术 专 
W3C 的 各 类 技术 标准 在 努力 截至 2014 年 3 月 ，W3C 共 设 家 及 个 人 参与 W3C 标 准 制 下 过 程 
为 各 类 应 用 的 开发 打造 一 个 开放 ; ” 立 5 个 技术 领域 ,开展 23 个 标准 的 Webizen 计 划 ， 敬 请 期 待 。 
的 Web 平 台 (Open Web : ”计划 。W3C 设 有 46 个 工作 组 于 2014 征 11 月 发 布 了 是 
Platform ) 。 尽 管 这 个 开放 Web 。。; 《Working Group) 、14 个 兴趣 小 有 fa on 
平台 的 边界 在 不 断 延伸 ， 产 业界 组 〈Interest Group) 、3 个 协调 组 
本 ape i 月 ) "的 报告 ,这 是 最 新 的 一 份 
认为 HTML5 将 是 这 个 平台 的 核 (Coordination Group ) 、1691 
、 对 wsc 近 期 开展 的 工作 砚 点 进行 
心 ， 平 台 的 能 力 将 依赖 于 W3C 及 社区 组 《Community Group ) ， a 
其 合作 伙伴 正在 创建 的 一 系列 ep 
作 重 点 和 优先 级 。 
图 11.4 设计 列 边 框 效 果 
11.1.5 设置 跨 列 显 示 


column-span 属性 可 以 定义 跨 列 显示 ， 基 本 语法 如 下 。 


column-span: none |all 


* 358。 


第 ]] 章 使 用 CSS3 设计 简 性 布局 好 


取 值 简单 说 明 如 下 。 

加 ”none: 不 路 列 。 

加 ”all: 横路 所 有 列 。 

【示例 】 在 11.1.4 节 示 例 的 基础 上 ， 使 用 column-span 属性 定义 一 级 标题 跨 列 显示 。 代 码 如 下 ， 
演示 效果 如 图 11.5 所 示 。 


body { 
/# 定 义 页 面 内 容 显 示 为 3 列 */ 


hl { 


} 


p {color: #333333; font-slze: 14px; line-height: 180%; text-indent: 2em:;} 


column-count: 3; 
话 定 义 列 间距 为 3em， 默 认为 lem*/ 
column-gap: 3em; 
line-height: 2.Sem: 
虑 定义 列 边框 为 2 像素 宽 的 灰色 虚线 */ 
column-rule: dashed 2px gray; 


} 


片 设置 一 级 标题 跨越 所 有 列 显 示 */ 


color: #333333; font-size: 20px: text-align: center:; 
padding: 12px; 

人 # 路 越 所 有 列 显示 部 
column-span: all; 


| © - @ npnocathost a000/mysite est hem -ac 


W3C 的 各 类 技术 标准 在 努力 
为 各 类 应 用 的 开发 打造 一 个 开放 
的 Web 平 台 (Open Web 
Platform ) 。 尽 管 这 个 开放 Web 
平台 的 边 穷 在 不 断 延 伸 ， 产 业 穷 
认为 HTML5 将 是 这 个 平台 的 核 
心 ， 平台 的 能 力 将 依赖 于 W3C 及 
其 合作 伙伴 正在 创建 的 一 系列 
Web 技 术 ， 包括 CSS, SVG 
WOFF. 语义 Web， 及 XML 和 各 
类 应 用 编程 接口 《APIs) 。 


图 11.5 


W3C 标 准 


截至 2014 年 3 月 ，W3C 共 设 
立 5 个 技术 领域 ， 开 展 23 个 标准 
计划 。W3C 设 有 46 个 工作 组 
(Working Group) 、14 个 兴起 小 
组 《Interest Group)》 、3 个 协调 组 
(Coordination Group ) 、169 个 
社区 组 (Community Group ) ， 
以 及 3 个 业务 组 (Business 
Group) 。 


a 


设计 标题 跨 列 显示 效果 


XxX 


全 太 斌 


目前 ，W3C 正 在 探讨 技术 专 
家 及 个 人 参与 W3C 标 准 制定 过 程 
的 Webizen 计 划 ， 徐 请 期 待 。 


W3C 于 2014 年 11 月 发 布 了 题 
为 “W3C 工 作 重点 《2014 年 11 
月 ) "的 报告 ,这 是 最 新 的 一 份 
对 W3C 近 期 开展 的 工作 要 点 进行 
了 综述 的 文章 ， 阐 述 了 近期 的 工 
作 重 点 和 优先 级 。 
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11.1.6 ”设置 列 高 度 
column-fill 属性 可 以 定义 栏目 的 高 度 是 否 统一 ， 基 本 语法 如 下 。 
column-fill: auto | balance 


取 值 简单 说 明 如 下 。 

凶 ”auto: 列 高 度 自 适应 内 容 。 

四 balance: 所 有 列 的 高 度 以 其 中 最 高 的 一 列 为 准 。 

【 示例】 在 上 面 示 例 的 基础 上 ， 使 用 column-fill 属性 定义 每 列 高 度 一 致 ， 代 码 如 下 。 


body { 
谍 定 义 页面 内 容 显 示 为 3 列 */ 
column-count: 3: 
话 定 义 列 间距 为 3em， 默 认为 lem*/ 
column-gap: 3em; 
line-height: 2.5em; 
虑 定义 列 边 框 为 2 像素 宽 的 灰色 虚线 */ 
column-rule: dashed 2px gray; 
此 设置 名 列 高 度 一 致 */ 


column-fill: balance: 


11.2 ”旧版 伸缩 盒 


Flexbox (伸缩 盒 ) 是 CSS3 新 增 的 布局 模型 ， 实 际 上 它 一 直 都 存在 。 最 开始 它 作为 Mozilla XUL 
的 一 个 功能 被 用 来 制作 程序 界面 ， 如 Firefox 的 工具 栏 就 多 次 使 用 这 个 属性 。 本 节 重 点 介绍 老 版 本 伸 
缩 盒 模型 的 基本 用 法 。 


11.2.1 启动 伸缩 盒 


在 旧版 本 中 局 动 伸缩 盒 模 型 ， 只 需 设 置 容 堪 的 display 的 属性 值 为 box (或 inline-box)， 用 法 
如 下 。 
display: box: 
display: mnline-box: 
伸缩 盒 模型 由 父 容 器 和 子 容器 两 部 分 构成 。 父 容 峰 通过 display:box: 或 者 display: inline-box: 局 动 伸 
缩合 布局 功能 。 子 容 费 通过 box-flex 属性 定义 布局 宽度 ， 以 及 如 何 对 父 容 器 的 宽度 进行 分 配 。 父 容 
器 义 通过 如 下 属性 定义 包含 容器 的 显示 属性 ， 简 单 说 明 如 下 。 


so 
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box-orient: 定义 父 容器 里 子 容器 的 排列 方式 是 水 平 还 是 年 直 。 


box-align: 定义 子 容器 的 年 直 对 齐 方式 。 


四 
加 ”box-direction: 定义 父 容器 里 的 子 容 喜 排 列 顺序 。 
四 | 
四 | 


box-pack: 定义 子 容 右 的 水 平 对 齐 方 式 。 


< 注意 : 使 用 旧版 本 伸缩 念 模型 ， 需 要 用 到 各 浏览 器 的 私有 属性 ，Webkit 引擎 支持 -webkit- 前 缓 的 
私有 属性 ，Mozilla Gecko 引擎 支持 -moz- 前 缓 的 私有 属性 ，Presto 引擎 ( 包括 Opera 浏览 


器 等 ) 支持 标准 属性 ，IE 暂 不 支持 旧版 本 伸缩 盒 模型 。 


11.2.2 ”设置 宽度 


在 默认 情况 下 ， 盒 子 没有 弹性 ， 它 将 尽 可 能 宽 地 使 其 内 容 可 见 ， 且 没有 溢出 ， 其 大 小 由 width、 


height、min-height、min-width、max-width 或 者 max-height 属性 值 来 决定 。 


使 用 box-flex 属性 可 以 把 默认 布局 变 为 盒 布 局 。 如 果 box-flex 的 属性 值 为 1， 则 元 素 变 得 富有 弹 


性 ， 其 大 小 将 按 以 下 方式 计算 。 


加 ”声明 的 大 小 (width、height、min-width、min-height、max-width、max-height)。 


四 ” 父 容 右 的 大 小 和 所 有 余下 的 可 利用 的 内 部 空间 。 


如 果 盒 子 没有 声明 大 小 ， 那 么 其 大 小 将 完全 取决 于 父 容器 的 大 小 ， 即 盒子 的 大 小 等 于 父 容器 的 
大 小 乘 以 其 box-flex 在 所 有 盒子 box-flex 总 和 中 的 百分比 ， 用 公式 表示 如 下 。 
盒子 的 大 小 = 父 容器 的 大 小 X 盒子 的 box-flex/ 所 有 盒子 的 box-flex 值 的 和 


余下 的 盒子 将 按照 上 面 的 原则 分 享 剩 下 的 可 用 空间 。 


【示例 】 本 示例 定义 左 侧 边 栏 的 宽度 为 240px， 右 侧 边栏 的 宽度 为 200px， 中 间 内 容 版 块 的 宽度 
将 由 box-flex 属性 确定 。 详 细 代 码 如 下 ， 演 示 效 果 如 图 11.6 所 示 。 当 调整 窗口 宽度 时 ， 中 间 列 的 宽 


度 会 自 适应 显示 ， 使 整个 页 面 总 是 满 窗口 显示 。 


<style type= "text/css"> 
#container { 
谍 定 义 弹性 盒 布 局 样式 */ 
display: -moz-box; 


display: -webkit-box: 


display: box; 
} 
#left-sidebar { 
width: 240px: 
padding: 20px; 
background-color: orange; 
} 


es 
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<p> 转 朱 阁 ， 低 结 户 ， 照 无 眠 。 不 应 有 恨 ， 何 事 长 回 别 时 圆 ? 人 有 翡 欢 离合， 月 有 阴 畏 圆 缺 ， 此 
事 古 难 全 。 但 愿 人 长 久 ， 干 里 共 婵 娟 。</p> 





<div 1d="right-sidebar"> 
<h2> 词 人 列表 </h2> WE 
<ul> 
<]i><a hre 伍 "> 陆游 </a></li> 


<]i><a hre 仁 "> 李清照 </a></li> 
<]li><a hre 伍 "> 苏轼 </a></li> 
<]li><a hre 伍 "> 柳 永 </a></li> 
</ul> 
</div> 
</div> 


口 localhost:8080/mysite, X 





© | © localhost:8080/mysite/test1.html 








水 调 歌 头 。 明 月 几时 有 


苏轼 


两 搬 中 秋 ， 欢 饮 达 旦 ， 大 醉 ， 作 此 篇 ， 兼 怀 子 由 。 
明月 几时 有 ? 把 酒 问 青天 。 不 知 天 上 宫 阅 ， 今 夕 是 何 年 。 
oe 0 又 念 琼 楼 玉宇 ， 高 处 不 胜 寒 。 起 兽 弄 清 影 ， 


我 
何 
转 朱 赂 ， 低 绮 户 ， 照 无 眠 。 不 应 有 恨 ， 人 和 何事 长 向 别 时 圆 ? 人 
ri ， 月 有 阴 晴 圆 缺 ， 此 事 古 难 全。 但 愿 人 长 久 , 干 


图 11.6 定义 自 适 应 宽度 
11.2.3 ”设置 顺序 
使 用 box-ordinal-group 属性 可 以 改变 子 元 素 的 显示 顺序 。 语 法 格式 如 下 。 
box-ordinal-group: <integer> 


<integer> 用 整数 值 来 定义 伸缩 盒 对 象 的 子 元 素 显 示 顺 序 ， 默认 值 为 1。 浏览 器 在 显示 时 ， 将 根据 
该 值 从 小 到 大 来 显示 这 些 元 素 。 

【示例 】 以 上 节 示 例 为 基础 ， 在 左 栏 、 中 栏 、 右 栏 中 分 别 加 入 一 个 box-ordinal-group 属性 ， 并 指 
定 显示 的 序号 ， 这 里 将 中 栏 设 置 为 1， 右 栏 设 置 为 2， 左 栏 设 置 为 3， 则 可 以 发 现 3 栏 显 示 顺 序 发 生 
了 变化 。 代 码 如 下 ， 演 示 效 果 如 图 11.7 所 示 。 
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#left-sidebar { 
-moz-box-ordinal-group: 3; 
-webkit-box-ordinal-group: 3; 
box-ordinal-group: 3; 





} 

#contents { 
-moz-box-ordinal-group: 1; 
-webkit-box-ordinal-group: 1; 
box-ordinal-group: 1; 

} 

#right-sidebar { 
-moz-box-ordinal-group: 2; 
-webkit-box-ordinal-group: 2; 
box-ordinal-group: 2; 

3 


口 localhost:8080/mysite/ x WW 


G | © localhost:8080/mysite/test1.html 





水 调 歌 头 "明月 几时 有 


苏轼 


两 搬 中 秋 ， 欢 饮 达 旦 ， 大 醉 ， 作 此 篇 ， 兼 怀 子 由 。 


明月 几时 有 ? 把 酒 问 青天 。 不 知 天 上 宫阙 ， 今 少 是 何 年 。 我 
NE 


转 朱 赂 ， 低 绮 户 ， 照 无 眠 。 不 应 有 恨 ， 何 事 长 向 别 时 圆 ? 人 
eee 月 有 阴 晴 圆 缺 ， 此 事 古 难 全 。 但 愿 人 长 久 , 干 
月 。 





图 11.7 定义 列 显 示 顺 序 
11.2.4 ”设置 方向 
使 用 box-orient 属性 可 以 定义 元 素 的 排列 方向 ， 语 法 格式 如 下 。 
box-orient: horizontal | vertical | inline-axis | block-axis 


取 值 简单 说 明 如 下 。 
回 horizontal: 设置 伸缩 盒 对 象 的 子 元 素 从 左 到 右 水 平 排列 。 
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MM vertical: 设置 伸缩 盒 对 象 的 子 元 素 从 上 到 下 纵向 排列 。 
回 inline-axis， 设置 伸缩 盒 对 象 的 子 元 素 沿 行 轴 排 列 。 
四 block-axis: 设置 伸缩 盒 对 象 的 子 元 素 沿 块 轴 排 列 。 人 7 
【示例 】 针 对 上 面 的 示例 ， 在 <div 1d="container"> 标 签 样 式 中 加 入 box-orient 属性 ， 并 设 定 属性 值 
为 vertical， 即 定义 内 容 以 垂直 方向 排列 ， 则 代表 左 侧 边 栏 、 中 间 内 容 、 右 侧 边栏 的 3 个 div 元 素 的 
排列 方向 将 从 水 平方 向 改 变 为 垂直 方向 。 代 码 如 下 ， 演 示 效 果 如 图 11.8 所 示 。 
#container { 
族 定 义 弹性 盒 布局 样式 */ 
display: -moz-box; 
display: -webkit-box.; 
display: box; 
谍 定 义 从 上 到 下 排列 显示 */ 
-moz-box-orient: vertlcal: 
-webkit-box-orient: vertical:; 
box-orient: vertical: 





口 localhost:8080/mysite/ x WN 








C | © localhost:8080/mysite/test1.html 


水 调 歌 头 。 明 月 几时 有 
苏轼 


两 搬 中 秋 ， 欢 饮 达 旦 ， 大 醉 ， 作 此 篇 ， 兼 怀 子 由 。 
RE 


nr 
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图 11.8 定义 列 显示 方 问 


使 用 box-direction 属性 可 以 让 各 个 子 元 素 反 回 排序 ， 语 法 格式 如 下 。 


box-direction: normal | Teverse 


9 
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取 值 简单 说 明 如 下 。 
加 ”normal: 设置 伸缩 盒 对 象 的 子 元 素 按 正常 顺序 排列 。 
本 回 reverse: 反 转 伸缩 盒 对 象 的 子 元 素 的 排列 顺序 。 


11.2.5 ”设置 对 齐 方式 
使 用 box-pack 属性 可 以 设置 子 元 素 水 平方 向 对 齐 方式 ， 语 法 格式 如 下 。 
box-pack: start | center | end | justify 


取 值 简单 说 明 如 下 。 

四 start: 设置 伸缩 盒 对 象 的 子 元 素 从 开始 位 置 对 齐 ， 为 默认 值 。 

四 center: 设置 伸缩 盒 对 象 的 子 元 素 居 中 对 齐 。 

四 end: 设置 伸缩 使 对 象 的 子 元 素 从 结束 位 置 对 齐 。 

四 justify: 设置 伸缩 盒 对 象 的 子 元素 两 端 对 齐 。 

使 用 box-align 属性 可 以 设置 子 元 素 垂 直方 向 对 齐 方式 ， 语 法 格式 如 下 。 





box-align: start | end | center | baseline | stretch 


取 值 简单 说 明 如 下 。 

start: 设置 伸缩 盒 对 象 的 子 元 素 从 开始 位 置 对 齐 。 
center: 设置 伸缩 盒 对象 的 子 元 素 居 中 对 齐 。 

end: 设置 伸缩 盒 对 象 的 子 元素 从 结束 位 置 对 齐 。 
baseline: 设置 伸缩 盒 对 象 的 子 元 素 基 线 对 齐 。 

stretch: 设置 伸缩 盒 对 象 的 子 元 素 自 适应 父 元 素 尺寸 。 

【示例 】 在 本 示例 中 有 一 个 <div class="login"> 容 器 ,其 中 包含 一 个 登录 表单 对 象 , 为 了 方便 练习 ， 
本 例 使 用 一 个 <img> 标 签 模拟 ， 然 后 使 用 box-pack 和 box-align 属性 让 表单 对 象 在 <div class="login"> 
容器 的 正中 央 显 示 。 同 时 ， 设 计 <div class="login"> 容 右 高 度 和 宽度 都 为 100%， 这 样 就 可 以 让 表单 对 
象 在 窗口 中 央 位 置 显示 。 具 体 实现 代码 如 下 ， 设 计 效 果 如 图 11.9 所 示 。 


多 的 多 的 的 


<style type="text/css"> 

虑 清除 页 边 距 */ 

body { margin: 0; padding: 0:} 

div { position: absolute: } 

-bg {/* 设 计 遍 四 层 */ 
width: 100%:; height: 100%: 
backsground: #000; opacity: 0.7; 


} 

.login { 
诈 满 屏 显 示 */ 
width:100%: height:100%: 


300 
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谍 定 义 弹性 盒 布局 样式 */ 
display: -moz-box: 
display: -webkit-box; 
display: box; 

/# 垂 直 居中 显示 状 
-moz-box-align: center:; 
-webkit-box-align: center:; 
box-align: center: 
放水 平 大 中 显示 */ 
-moz-box-pack: center; 
-webkit-box-pack: center:; 
box-pack: center: 


} 
</style> 


<div class="web"><1mg src="i1mages/bg.png" /></div> 
<div class="bg"></div> 
<div class="login"><1img src="i1mages/login.png" /></div> 


口 localhost:8080/mysite/ x WN 


CC | © localhost:80 


图 11.9 设计 登录 表单 中 央 显 示 
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11.3 新 版 伸缩 盒 


伸缩 盒 模型 是 一 个 新 的 盒子 模型 ， 它 主要 优化 了 UI 布局 ， 可 以 简单 地 使 一 个 元 素 居 中 《包括 水 
平和 垂直 居中 )， 可 以 扩大 或 收缩 元 素来 填充 容器 的 可 利用 空间 ， 也 可 以 改变 布局 顺序 等 。 本 节 将 重 
点 介绍 新 版 本 伸缩 盒 模型 的 基本 用 法 。 


11.3.1 认识 Flexbox 系统 


Flexbox 由 伸缩 容 堪 和 伸缩 项 目 组 成 。 

在 伸缩 容器 中 ， 每 一 个 子 元 素 都 是 一 个 伸缩 项 目 ， 伸 缩 项 目 可 以 是 任意 数量 的 ， 伸 缩 容 右 外 和 
伸缩 项 目 内 的 一 切 元 素 都 不 受 影 啊 。 

伸缩 项 目 沿 着 伸缩 容器 内 的 一 个 伸缩 行 定 位 ， 通 和 常 每 个 伸缩 容器 只 有 一 个 伸缩 行 。 在 默认 情况 
下 ， 伸 缩 行 和 文本 方 同 一 致 :， 从 左 至 右 ， 从 上 到 下 。 

常规 布局 是 基于 块 和 文本 流 方 同 ， 而 Flex 布局 是 基于 flex-flow 流 。 如 图 11.10 所 示 是 W3C 规范 
对 Flex 布局 的 解释 。 
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图 11.10 Flex 布局 模式 
伸缩 项 目 是 沿 着 主轴 ， 从 主轴 起 点 到 主轴 终点 ， 或 者 沿 着 侧 轴 ， 从 侧 轴 起 点 到 侧 轴 终点 排列 。 
名 主轴 (main axis): 伸缩 容器 的 主轴 ， 伸 缩 项 目 主要 沿 着 这 条 轴 进 行 排列 布局 。 注 意 ， 它 不 
一 定 是 水 平 的 ， 这 主要 取决 于 justify-content 属性 设置 。 


加 ”主轴 起 点 (main-start) 和 主轴 终点 (main-end): 伸缩 项 目 放置 在 伸缩 容器 内 从 主轴 起 点 向 
主轴 终点 方 同 。 


名 ”主轴 尺寸 (main size): 伸缩 项 目 在 主轴 方 同 的 宽度 或 高 度 就 是 主轴 的 尺寸 。 伸 缩 项 目 主要 
的 大 小 属性 是 宽度 或 高 度 ， 由 对 着 主轴 方 加 的 那个 来 决定 。 
名” 侧 轴 (cross axis): 垂直 于 主轴 ， 它 的 方向 主要 取决 于 主轴 方向 。 


回 ” 侧 轴 起 点 〈cross-start) 和 侧 轴 终点 (cross-end): 伸缩 行 的 配置 从 容器 的 侧 轴 起 点 边 开 始 ， 
往 侧 轴 终点 边 结 束 。 
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四 ” 侧 轴 斥 寸 cross size): 伸缩 项 目 在 侧 轴 方 癌 的 宽度 或 高 度 就 是 项 目的 侧 轴 长 度 ， 伸 缩 项 目 
的 侧 轴 长 度 属性 是 width 或 height， 由 对 独 侧 轴 方 向 的 那个 来 决定 。 
一 个 伸缩 项 目 就 是 一 个 伸缩 容器 的 子 元 素 ， 伸 缩 容 器 中 的 文本 也 被 视 为 一 个 伸缩 项 目 。 伸 缩 项 
目 中 的 内 容 与 普通 文本 流 一 样 。 例 如 ， 当 一 个 伸缩 项 目 被 设置 为 浮动 时 ， 用 户 依然 可 以 在 这 个 伸缩 
项 目 中 放置 一 个 浮动 元 素 。 


11.3.2 ”局 动 伸缩 盒 


通过 设置 元 素 的 display 属性 为 flex 或 inline-flex 可 以 定义 一 个 伸缩 容器 。 设 置 为 flex 的 容器 被 
泻 染 为 一 个 块 级 元 素 ， 而 设置 为 nline-flex 的 容器 则 被 泻 染 为 一 个 行内 元 素 。 有 具体 语法 如 下 。 


display: flex | Inline-flex: 


上 面 的 属性 值 决定 容器 是 行内 显示 还 是 块 显 示 ， 它 的 所 有 子 元 系 将 变 成 flex 文档 流 ， 被 称 为 伸 
缩 项 目 。 
此 时 ，CSS 的 columns 属性 在 伸缩 容 顷 上 没有 效果 ， 同 时 float、clear 和 vertical-align 属性 在 伸 
缩 项 目 上 也 没有 效果 。 
【示例 】 本 示例 将 设计 一 个 伸缩 容器 ， 其 中 包含 4 个 伸缩 项 目 。 代 码 如 下 ， 演 示 效 果 如 图 11.11 
所 未。 


<style type="text/css"> 

.flex-container { 
display: -webkit-flex: 
display: flex: 
width: S00px: height: 300px: 
border: solid 1px red; 

} 

.flex-item { 
background-color: blue:; 
width: 200px: height: 200px:; 
margin: 10px; 

} 

</style> 


<div class="flex-container"> 
<div class="flex-item"> 伸 缩 项 目 1</div> 
<div class="flex-item"> 伸 缩 项 目 2</div> 
<div class="flex-item"> 伸 缩 项 目 3</div> 
<div class="flex-item"> 伸 缩 项 目 4</div> 
</div> 


“0 





口 localhost:8080/mysite/ x WN 


GG | © localhost:8080/mysite/test.html 安 加 到 


图 11.11 定义 伸缩 盒 布 局 














11.3.3 ”设置 主轴 方向 
使 用 flex-direction 属性 可 以 定义 主轴 方向 ， 它 适用 于 伸缩 容器 。 有 具体 语法 如 下 。 





flex-direction: row |row-reverse | column | column-reverse 


取 值 说 明 如 下 。 

回 ”row 主轴 与 行内 轴 方向 作为 默认 的 书写 模式 ， 即 横向 从 左 到 右 排列 《 左 对 齐 )。 

名 ”row-reverse: 对 齐 方 式 与 row 相反 。 

加” column: 主轴 与 侧 轴 方向 作为 默认 的 书写 模式 ， 即 纵向 从 上 往 下 排列 〈( 顶 对 齐 )。 

名 ”column-reverse: 对 齐 方式 与 column 相反 。 

【示例 】 在 上 节 示 例 的 基础 上 ， 本 例 将 设计 一 个 伸缩 容器 ， 其 中 包含 4 个 伸缩 项 目 ， 然 后 定义 伸 
缩 项 目 从 上 往 下 排列 。 代 码 如 下 ， 演 示 效 果 如 图 11.12 所 示 。 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex:; 
display: flex: 
-webkit-flex-direction: column: 
flex-direction: column:; 
width: S00px;height: 300px;border: solid 1px red; 
} 
.flex-item { 
background-color: blue; 
width: 200px: height: 200px: 
margin: 10px; 
} 
</style> 
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[9 localhost:8080/mysite/ x Wn 





CGC | © localhost:8080/mysite/test.html 














图 11.12 定义 伸缩 项 目 从 上 往 下 布局 


11.3.4 ”设置 行 数 


flex-wrap 定义 伸缩 容器 是 单行 还 是 多 行 显示 伸缩 项 目 ， 侧 轴 的 方向 决定 了 新 行 堆放 的 方 同 。 具 
体 语 法 格式 如 下 。 





flex-wrap: nowrap | wrap | wrap-reverse 


取 值 说 明 如 下 。 
加”nowrap: flex 容器 为 单行 。 该 情况 下 flex 子 项 可 能 会 游 出 容器 。 
加 ”wrap: flex 容 右 为 多 行 。 该 情况 下 flex 子 项 洲 出 的 部 分 会 被 放置 到 新 行 ， 子 项 内 部 会 发 生 
靳 行 。 
名 ”wrap-reverse: 反 转 wrap 排列 。 
【示例 】 在 上 面 示 例 的 基础 上 ， 本 示例 将 设计 一 个 伸缩 容器 ， 其 中 包含 4 个 伸缩 项 目 ， 然 后 定义 
伸缩 项 目 多 行 排列 。 代 码 如 下 ， 演 示 效 果 如 图 11.13 所 示 。 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 


display: flex: 

-webkit-flex-wrap: wrap; 

flex-wrap: wrap; 

width: S00px; height: 300px:border: solid 1px red: 
} 
.flex-item { 


background-color: blue; 


width: 200px: height: 200px; 


Th 











margin: 10pX: 











} 
</style> 
| localhost/mysite/test.ht! x 
CC (DD localhost/mysite/test.html 
图 11.13 定义 伸缩 项 目 多 行 布局 
【补充 】 


flex-flow 属性 是 flex-direction 和 flex-wrap 属性 的 复合 属性 ， 适 用 于 伸缩 容器 。 该 属性 可 以 同时 
定义 伸缩 容器 的 主轴 和 侧 轴 。 其 默认 值 为 row nowrap。 上 有 具体 语法 如 下 。 


flex-flow: <' flex-direction > || < flex-wrap > 


取 值 说 明 如 下 。 
加 < flex-drection>: 定义 弹性 盒子 元 素 的 排列 方向 。 
器” < flex-wrap>: 控制 flex 容器 是 单行 还 是 多 行 。 


11.3.5 ”设置 对 齐 万 式 
1. 主轴 对 齐 
justify-content 定义 伸缩 项 目 沿 着 主轴 线 对 齐 ， 该 属性 适用 于 伸缩 容器 。 有 具体 语法 如 下 。 
justify-content: flex-start | flex-end | center | space-between | space-around 


取 值 说 明 如 下 。 

四 flex-star: 为 默认 值 ， 伸 缩 项 目 同 一 行 的 起 始 位 置 靠 齐 。 

flex-end: 伸缩 项 目 辐 一 行 的 结束 位 置 靠 齐 。 

center: 伸缩 项 目 向 一 行 的 中 间 位 置 靠 齐 。 

space-between: 伸缩 项 目 会 平均 地 分 布 在 行 里 。 第 一 个 伸缩 项 目 在 一 行 中 的 开始 位 置 ， 最 
后 一 个 伸缩 项 目 在 一 行 中 的 终点 位 置 。 

回 ”space-around: 伸缩 项 目 会 平均 地 分 布 在 行 里 ， 两 端 保留 一 半 的 空间 。 


是 的 的 


A 
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上 述 取 值 比较 效果 如 图 11.14 所 示 。 








flex-star flex-end center | 时 
I EXO 


space-between space-around 
11.14 主轴 对 齐 示 意图 
2. 侧 轴 对 齐 


align-items 定义 伸缩 项 目 在 侧 轴 上 的 对 齐 方式 ， 该 属性 适用 于 伸缩 容器 。 有 具体 语法 如 下 。 


align-items: flex-start | flex-end | center | baseline | stretch 


取 值 说 明 如 下 。 

flex-start: 伸缩 项 目 在 侧 轴 起 点 边 的 外 边 距 紧 靠 住 该 行 在 侧 轴 起 始 的 边 。 

flex-end: 伸缩 项 目 在 侧 轴 终点 边 的 外 边 距 靠 住 该 行 在 侧 轴 终 点 的 边 。 

center: 伸缩 项 目的 外 边 距 盒 在 该 行 的 侧 轴 上 居中 放置 。 

baseline: 伸缩 项 目 根据 它们 的 基线 对 齐 。 

stretch: 默认 值 ， 伸 缩 项 目 拉 伸 填 充 整个 伸缩 容器 。 此 值 会 使 项 目的 外 边 距 盒 的 尺寸 在 遵照 
min/max-width/height 属性 的 限制 下 尽 可 能 接近 所 在 行 的 尺寸 。 

上 述 取 值 比较 效果 如 图 11.15 所 示 。 


flex-star flex-end center 


多 的 多 的 





baseline stretch 


11.15 侧 轴 对 齐 示意 图 


3. 伸缩 行 对 齐 


align-content 定义 伸缩 行 在 伸缩 容器 里 的 对 齐 方式 ， 该 属性 适用 于 伸缩 容器 。 类 似 于 伸缩 项 目 在 
主轴 上 使 用 justify-content 属性 ， 但 本 属性 在 只 有 一 行 的 伸缩 容 堪 上 没有 效果 。 有 具体 语法 如 下 。 


Sf 
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也 


align-content: flex-start | flex-end | center | space-between | space-around | stretch 


全 / 取 值 说 明 如 下 。 

一 flex-start: 各 行 问 伸缩 容器 的 起 点 位 置 堆 和 登 。 

flex-end: 各 行 癌 伸缩 容器 的 结束 位 置 堆 登 。 

center: 各 行 回 伸 缩 容器 的 中 间 位 置 堆 登 。 

space-between: 各 行 在 伸缩 容器 中 平均 分 布 。 

space-around: 各 行 在 伸缩 容器 中 平均 分 布 ， 在 两 边 各 有 一 半 的 空间 。 
stretch: 默认 值 ， 各 行将 会 伸展 以 占用 剩余 的 空间 。 

上 述 取 值 比较 效果 如 图 11.16 所 示 。 





多 多 多 的 的 










flex-star flex-end center 
space-between space-around stretch 


11.16 伸缩 行 对 齐 示意 图 


【示例 】 本 示例 以 上 面 的 示例 为 基础 ， 定 义 伸缩 行 在 伸缩 容器 中 居中 显示 。 代 码 如 下 ， 演 示 效 果 
如 图 11.17 所 示 。 


<style type="text/css"> 
.flex-container { 

display: -webkit-flex:; 

display: flex:; 

-webkit-flex-wrap: wrap; 

flex-wrap: wrap; 

-webkit-align-content: center:; 

align-content: center; 

width: S00px; height: 300px;border: solid 1px red: 
} 


.flex-item { 


.374 . 
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background-color: blue:; 





width: 200px: height: 200px: 
margin: 10px; 

} 

</style> 


图 二 


| localhost/mysite/test.ht x 
CC 癌 localhost/mysite/test.html 








图 11.17 定义 伸缩 行 居 中 对 齐 


11.3.6 ”设置 伸缩 项 目 


伸缩 项 目 都 有 一 个 主轴 长 度 (Main Size) 和 一 个 侧 轴 长 度 〈《Cross Size)。 主 轴 长 度 是 伸缩 项 目 在 
主轴 上 的 尺寸 ， 侧 轴 长 度 是 伸缩 项 目 在 侧 轴 上 的 尺寸 。 一 个 伸缩 项 目的 宽 或 高 取决 于 伸缩 容器 的 轴 ， 
可 能 就 是 它 的 主轴 长 度 或 侧 轴 长 度 。 下 面 的 属性 适用 于 伸缩 项 目 ， 可 以 调整 伸缩 项 目的 行为 。 

1. 显示 位 置 
order 属性 可 以 控制 伸缩 项 目 在 伸缩 容器 中 的 显示 顺序 ， 有 具体 语法 如 下 。 





order: <integer> 

<integer> 用 整数 值 来 定义 排列 顺序 ， 数 值 小 的 排 在 前 面 。 可 以 为 负 值 。 

2. 扩展 空间 

flex-grow 可 以 定义 伸缩 项 目的 扩展 能 力 ， 决 定 伸缩 容器 剩余 空间 按 比 例 应 扩展 多 少 。 具 体 语法 
如 下 。 

flex-grow: <number> 


<number> 用 数值 来 定义 扩展 比率 。 不 允许 有 负 值 ， 默 认 值 为 0。 
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如 果 所 有 伸缩 项 目的 flex-grow 均 设置 为 1， 那 么 每 个 伸缩 项 目 将 设置 为 一 个 大 小 相等 的 剩余 空 
， 间 。 如 果 设 置 其 中 一 个 伸缩 项 目的 flex-grow 为 2， 那 么 这 个 伸缩 项 目 所 占 的 剩余 空间 是 其 他 伸缩 项 
。 目 所 占 剩 余 空 间 的 两 信 。 


3. 收缩 空 i 
| 


flex-shrink 可 以 定义 伸缩 项 目 收缩 的 能 力 ， 与 flex-grow 功能 相反 。 具 体 语 法 如 下 。 


flex-shrink: <number> 


<number> 用 数值 来 定义 收缩 比率 。 不 允许 有 负 值 ， 默 认 值 为 1。 
4. 伸缩 比率 


flex-basis 可 以 设置 伸缩 基准 值 ， 剩 余 的 空间 按 比率 进行 伸缩 。 具 体 语法 如 下 。 
flex-basis: <length> | <percentage> | auto | content 


取 值 说 明 如 下 。 

四 ”<length>: 用 长 度 值 来 定义 宽度 。 不 允许 有 负 值 。 

加 ”<percentage>: 用 百分比 来 定义 宽度 。 不 允许 有 负 值 。 

四 auto: 无 特定 宽度 值 ， 取 决 于 其 他 属性 值 。 

四 content: 基于 内 容 自动 计算 宽度 。 

【补充 】 

flex 是 flex-grow、flex-shrink 和 flex-basis 3 个 属性 的 复合 属性 ， 该 属性 适用 于 伸缩 项 目 。 其 中 第 
2 个 和 第 3 个 参数 (flex-shrink、flex-basis) 是 可 选 参数 。 默 认 值 为 “0 1 auto”。 具 体 语法 如 下 。 


flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
5. 对 天方 式 
align-self 用 来 在 单独 的 伸缩 项 目 上 覆 写 默认 的 对 齐 方 式 。 具 体 语法 如 下 。 
align-self: auto | flex-start | flex-end | center | baseline | stretch 
属性 值 与 align-items 的 属性 值 相同 。 
【示例 1】 以 上 面 的 示例 为 基础 ， 定 义 伸 缩 项 目 在 当前 位 置 向 右 错 移 一 个 位 置 ， 其 中 第 1 个 项 目 


位 于 第 2 项 目的 位 置 ， 第 2 个 项 目 位 于 第 3 个 项 目的 位 置 ， 最 后 一 个 项 目 移 到 第 1 个 项 目的 位 置 。 
代码 如 下 ， 演 示 效 果 如 图 11.18 所 示 。 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 
display: flex:; 
width: S00px: height: 300px:border: solid 1px red: 


Te 
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.flex-item { background-color: blue; width: 200px: height: 200px: margin: 10px:} 
.flex-1tem:nth-child(0)1{ 
-webkit-order: 4: 





order: 4: 

} 

.flex-i1tem:nth-child(1){ 
-webkit-order: 1:; 
order: 1: 

} 

.flex-i1tem:nth-child(2){ 
-webkit-order: 2; 
order: 2: 

} 

.flex-ltem:nth-chlld(3){ 
-webkit-order: 3; 
order: 3: 

} 

</style> 


localhost/mysite/test.ht x 


) localhost/mysite/test.html 

















图 11.18 定义 伸缩 项 目 错位 显示 


【示例 2】margin: auto: 在 伸缩 盒 中 具有 强大 的 功能 ， 一 个 “auto” 的 margin 会 合并 剩余 的 空间 。 
它 可 以 用 来 把 伸缩 项 目 挤 到 其 他 位 置 。 本 示例 利用 margin-right: auto: 定 义 包含 的 项 目 大 中 显示 , 代码 
如 下 ， 效 果 如 图 11.19 所 示 。 


<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 


“711 
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display: flex; 
width: S00px: height: 300px: border: solid 1px red:; 


A 


.flex-item { 


JNote background-color: blue; width: 200px; height: 200px; 
margin: auto; 
} 
</style> 


<div class="flex-container"> 
<div class="flex-item"> 伸 缩 项 目 </div> 
</div> 


[| localhost/mysite/test1.h x Wo 
€ CC (Dlocalhost/mysite/test1.html 








图 11.19 ”定义 伸缩 项 目 居 中 显示 


11.4 伸缩 盒 版 本 比较 和 兼容 


本 节 将 重点 介绍 伸缩 盒 模型 的 老 版 本 、 混 合 版 本 和 新 版 本 之 间 的 用 法 差异 及 兼容 方法 ， 以 便 用 
户 设计 在 不 同 浏览 硕 上 都 能 正确 显示 的 弹性 布局 。 


11.4.1 版 本 比较 和 兼容 方法 


CSS3 伸缩 盒 布 局 还 在 不 断 发 展 中 ， 并 不 断 升 级 ， 大 致 经 历 了 3 个 阶段 ， 并 逐步 达到 稳定 ， 主 流 
浏览 器 对 新 版 本 也 开始 完整 地 文 持 。 

四 ”2009 年 版 本 (旧版 本 ): display:box:。 

四 2011 年 版 本 (混合 版 本 ): display:flexbox;。 
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加 ”2012 年 版 本 〈 新 版 本 ): display:flex:。 

如 果 把 Flexbox 新 语法 、 旧 语法 和 混合 语法 混合 在 一 起 使 用 ， 就 可 以 让 浏览 器 得 到 完美 地 展示 。 
当然 ,在 使 用 Flexbox 时 ， 应 该 考虑 不 同 浏览 器 的 私有 属性 ， 如 Chrome 要 添加 前 组 -webkit-，Firefox 
要 添加 前 级 -moz- 等 。 \ 

1. 浏览 器 支持 状况 

各 主流 浏览 器 对 Flexbox 规范 版 本 的 支持 如 表 11.1 所 示 。 





表 11.1 浏览 器 对 规范 版 本 的 支持 
新 版 本 (标准 版 ) 29+、 21_28 (-webkit-) 
Wi | | | | 


2. 开局 Flexbox 
不 同 Flexbox 版 本 定义 一 个 元 素 为 伸缩 容器 的 方法 比较 如 表 11.2 所 示 。 
表 11.2 比较 启动 Flexbox 


规范 版 本 属性 名 称 块 伸缩 容器 内 联 伸缩 容器 
ass 
3. 主轴 对 齐 方式 
不 同 Flexbox 版 本 指定 伸缩 项 目 沿 主轴 对 齐 方式 的 取 值 比较 如 表 11.3 所 示 。 
表 11.3 ”比较 主轴 对 齐 方式 


ET 


注 : start: 开始 位 置 。 

center: 中 间 位 置 。 

end: 结束 位 置 。 

justify: 两 端 对 齐 。 
distribute: 均匀 对 齐 。 
N/A: 表示 不 适用 的 意思 。 


4. 侧 轴 对 齐 方式 
不 同 Flexbox 版 本 指定 伸缩 项 目 沿 侧 轴 对 齐 方式 的 取 值 比较 如 表 11.4 所 示 。 
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表 11.4 比较 侧 轴 对 齐 方式 


注 : 图 ”baseline: 基线 对 齐 。 
国 。 ”stretch: 伸展 对 齐 。 


5. 单个 伸缩 项 目 侧 轴 对 齐 方式 
不 同 Flexbox 版 本 指定 单个 伸缩 项 目 沿 侧 轴 对 章 方式 的 取 值 比较 如 表 11.5 所 示 。 
表 11.5 比较 单个 伸缩 项 目 侧 轴 对 齐 方式 


混合 版 flexritemralign | auto | stat | center | end | baseline | stretch 
老 版 本 N/A 

6. 伸缩 项 目 行 对 齐 方式 

不 同 Flexbox 版 本 指定 伸缩 项 目 行 在 侧 轴 的 对 齐 方式 的 取 值 比较 如 表 11.6 所 示 。 


表 11.6 ”比较 伸缩 项 目 侧 轴 对 齐 方式 


N/A 


老 版 本 





< 匀 注意 : 只 有 伸缩 项 目 有 多 行 时 才 生 效 ， 这 种 情况 只 针对 伸缩 容器 设置 了 flex-wrap 为 wrap， 并 且 
没有 足够 的 空间 把 伸缩 项 目 放 在 同一 行 中 。 这 将 对 每 一 行 起 作用 而 不 是 对 每 一 个 伸缩 项 
目 起 作用 。 

7. 显示 顺序 


不 同 Flexbox 版 本 指定 伸缩 项 目的 显示 顺序 的 取 值 比较 如 表 11.7 所 示 。 
表 11.7 比较 显示 顺序 


规范 版 本 属 性 什 
新 版 本 〈 标 准 版 ) <number> 


* 380。 
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8. 伸缩 性 
不 同 Flexbox 版 本 指定 伸缩 项 目 如 何 伸缩 比较 如 表 11.8 所 示 。 


表 11.8 比较 伸缩 性 
规范 版 本 属性 名 称 属 性 值 


新 版 本 (标准 版 》 fx none | [ <flex-grow> <flex-shrink>? || <flex-basis>] 
混合 none | [ [ <pos-flex> <neg-flex>? | || <preferred-size> | 
GE | er 


flex 属性 在 微软 的 草案 与 新 标准 或 多 或 少 不 一 样 。 它 们 都 转换 成 标准 缩写 版 本 ， 属 性 值 为 
flex-grow、flex-shrink 和 flex-basis。 主 要 区 别 在 于 : flex-shrink〔〈 以 前 称 为 负 flex) 的 默认 值 为 1。 这 
意味 看 伸缩 项 目 默认 不 能 收缩 。 以 前 ， 衬 间 不 足 使 用 flex-shrink 比例 来 收缩 伸缩 项 目 ， 但 现在 可 以 
在 flex-basis 的 基础 上 配合 flex-shrink 来 收缩 伸缩 项 目 。 

9. 伸缩 流 

不 同 Flexbox 版 本 指定 伸缩 容器 主轴 的 伸缩 流 方 癌 比 较 如 表 11.9 所 示 。 


表 11.9 比较 伸缩 流 


规范 版 本 属性 名 称 Reversed horizontal Reversed vertical 
RA RD | icio | wow | wa | eon | wm 


老 版 本 
box-direction normal reverse normal reverse 

在 旧版 本 规范 中 ， 将 box-direction 属性 设置 为 reverse 和 在 新 版 本 中 设置 row-reverse 或 
column-reverse 得 到 的 效果 相同 。 如 果 想 要 的 效果 是 row 或 column， 可 以 省 略 不 设置 ， 因 为 normal 
是 默认 的 初始 值 。 

当 设 置 direction 为 reverse 时 ， 主 轴 就 翻转 。 例 如 ， 当 使 用 “ltr” 书 写 模式 指定 row-reverse 时 ， 
所 有 伸缩 项 目 会 从 右 辐 左 排列 。 类 似 的 ，column-reverse 将 会 使 所 有 伸缩 项 目 从 下 同上 排列 ， 来 代替 
从 上 往 下 排列 。 

在 老 版 本 中 ， 需 要 使 用 box-orient 来 设置 书写 模式 的 方向 。 当 使 用 “ltr” 模 式 时 ，horizontal 可 用 
inline-axis，vertical 可 用 block-axis。 如 果 使 用 的 是 一 个 自 上 而 下 的 书写 模式 ， 如 东亚 传统 的 书写 模 
式 ， 这 些 值 就 会 翻转 。 

10. 换行 

不 同 Flexbox 版 本 指定 伸缩 项 目 是否 沿 着 侧 轴 排 列 比较 如 表 11.10 所 示 。 


表 11.10 ”比较 换行 


规范 版 本 属性 名 称 No wrapping Wrapping Reversed wrap 
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规范 版 本 属性 名 称 No wrapping Wrapping Reversed wrap 
EE 区 


wrap-reverse 让 伸缩 项 目 在 侧 轴 上 进行 start 和 end 翻转 ， 所 以 ， 如 果 伸 缩 项 目 在 水 平 排列 ， 伸 缩 
项 目 不 会 翻转 到 一 个 新 的 线 下 面 ， 它 会 翻转 到 一 个 新 的 线 上 面 。 简 单 理 解 就 是 伸缩 项 目 只 是 上 下 或 
前 后 翻转 。 


11.4.2 ”案例 : 设计 3 栏 页 面 


本 案例 根据 上 节 介 绍 的 方法 ， 使 用 不 同 版 本 语法 ， 设 计 一 个 兼容 不 同 设备 和 浏览 器 的 弹性 页 面 ， 
演示 效果 如 图 11.20 所 示 。 


续 表 








a [中 -| 钨 http://localhost:8080/mysite/test.html 


水 调 歌 头 .明月 几时 有 


两 辰 中 秋 ， 欢 饮 达 旦 ， 大 酬 ， 作 此 篇 ， 兼 怀 子 由 。 


明月 几时 有 ? 把 酒 问 青 天 。 不 知 天 上 宫阙 ， 今 少 是 何 年 。 我 欲 
乘 风 归 去 ， 又 瓦 琼 楼 玉宇 ， 高 处 不 胜 寒 。 起 舞 弄 清 影 ， 何 似 在 


人 间 ? 


转 朱 图 ， 低 绮 户 ， 照 无 眠 。 不 应 有 恨 ， 何 事 长 向 别 时 贺 ? 人 有 
人 月 有 阴 晴 圆 缺 ， 此 事 古 难 全 。 但 愿 人 长 久 , 千里 共 
月 。 





图 11.20 3 栏 页 面 效果 


案例 主要 代码 如 下 。 

<style type="text/css"> 

.page-wrap 
display: -webkit-box: /#* 2009 版 -1OS 6-, Safari 3.1-6 */ 
display: -moz-box:; /2009 版 - Firefox 19-〈 存 在 缺陷 ) */ 
display: -ms-flexbox: /#2011 版 -IE10#/ 
display: -webkit-flex: /*# 最 新 版 - Chrome */ 
display: flex: /# 最 新 版 - Opera 12.1, Firefox 20+ */ 

} 


.main-content { 
-webkit-box-ordinal-group: 2: /六 2009 版 -1OS 6-, Safari 3.1-6 */ 
-moz-box-ordinal-group: 2: /# 2009 版 -Firefox 19-*/ 


2 


} 


-ms-flex-order: 2; 
-webkit-order: 2: 
order: 2; 

width: 60%: 


-moz-box-flex: 1: 


background: white: 


.main-nav { 


} 


-webkit-box-ordinal-group: 1; 
-moz-box-ordinal-group: 1; 
-ms-flex-order: 1 : 
-webkit-order: 1: 

order: 1:; 

-webkit-box-flex: 1: 
-moz-box-flex: 1; 

width: 20%: 

-webkit-flex: 1: 

-ms-flex: 1: 

flex: 1: 

background: #cece: 


.main-sidebar { 


} 


.main-content, .main-sidebar, .main-nav { padding: lem: } 


body {padding: 2em; background: #79a693;} 


-webkit-box-ordinal-group: 3; 
-moz-box-ordinal-group: 3; 
-ms-flex-order: 3; 
-webkit-order: 3: 

order: 3; 

-webkit-box-flex: 1: 
-moz-box-flex: 1: 

width: 20%: 

-ms-flex: 1:; 

-webkit-flex: 1: 

flex: 1: 

background: #ccece: 
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诬 2011 版 -下 10*/ 

/*# 最 新 版 - Chrome */ 

/*# 最 新 版 - Opera 12.1, Firefox 20+ */ 

谍 不 会 自动 伸缩 ， 其 他 列 将 占据 空间 */ 
/* 如 果 没 有 该 声明 ， 主 内 容 (60%) 会 伸展 到 最 宽 的 段落 ， 就 像 是 
段落 设置 了 white-space:nowrap */ 





/2009 版 - 10S 6-, Safari 3.1-6 */ 
/2009 版 - Firefox 19- */ 

/#2011 版 -下 10*/ 

/# 最 新 版 - Chrome */ 

/# 最 新 版 - Opera 12.1, Firefox 20+ */ 
/# 2009 版 -1OS 6-, Safari 3.1-6 */ 

/# 2009 版 - Firefox 19- */ 

/# 2009 版 语法 ， 否 则 将 裔 溃 */ 

/* Chrome */ 

*IE10*/ 

/* 最 新 版 - Opera 12.1, Firefox 20+ */ 


/#* 2009 版 - 10S 6-, Safari 3.1-6 */ 

/# 2009 版 - Firefox 19- *#/ 

/#2011 版 -IE 10*/ 

/# 最 新 版 - Chrome */ 

/*# 最 新 版 - Opera 12.1, Firefox 20+ */ 
/# 2009 版 - 10S 6-, Safari 3.1-6 */ 

/* Firefox 19- */ 

诬 2009 版 ， 否 则 将 崩溃 */ 
/#2011 版 -IE 10*/ 

/# 最 新 版 - Chrome */ 

/*# 最 新 版 - Opera 12.1, Firefox 20+ */ 


.0 
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页 面 被 包 于 在 类 名 为 page-wrap 的 容器 中 ， 容 器 包含 3 个 子 模块 。 现 在 将 容器 定义 为 伸缩 容器 ， 
此 时 每 个 子 模块 目 动 变 成 了 伸缩 项 目 ， 代 码 如 下 。 





本 例 设 计 各 列 在 一 个 伸缩 容器 中 显示 上 下 文 ， 只 有 这 样 这 些 元 素 才 能 直接 成 为 伸缩 项 目 ， 它 们 
之 前 是 什么 没有 关系 ， 只 要 现在 是 伸缩 项 目 即 可 。 

本 例 把 Flexbox 旧 的 语法 、 中 间 混 合 语法 和 最 新 的 语法 混在 一 起 使 用 , 它们 的 顺序 很 重要 。display 
属性 本 喘 并 不 添加 任何 浏览 器 前 级 ， 用 户 需要 确保 老 语 法 不 要 履 盖 新 语法 ， 让 浏览 器 同时 支持 ， 代 


。384 。 
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码 如 下 。 

.page-wrap { 
display: -webkit-box: /2009 版 -1OS 6-, Safari 3.1-6 */ 
display: -moz-box:; /# 2009 版 - Firefox 19-〈 存 在 缺陷 ) */ 
display: -ms-flexbox: /#2011 版 -IE 10*/ 
display: -webkit-flex: /*# 最 新 版 - Chrome */ 
display: flex: /# 最 新 版 - Opera 12.1，Firefox 20+ */ 

} 


整个 页 面包 含 3 列 ， 设 计 一 个 20%、60%、20% 的 网 格 布局 。 首 先 设置 主 内 容 区 域 宽度 为 60%， 
然后 设置 侧 边栏 来 填补 剩余 的 空间 。 同 样 把 新 旧 语 法 混在 一 起 使 用 ， 代 码 如 下 。 


.main-content { 


-webkit-box-ordinal-group: 2; /#* 2009 版 - 10S 6-, Safari 3.1-6 */ 


-moz-box-ordinal-group: 2; /# 2009 版 - Firefox 19-*/ 

-ms-flex-order: 2: 让 2011 版 -IE 10*/ 

-webkit-order: 2: /*# 最 新 版 - Chrome */ 

order: 2; /# 最 新 版 - Opera 12.1，Firefox 20+ */ 

width: 60%; 谍 不 会 自动 伸缩 ， 其 他 列 将 占据 空间 */ 
-moz-box-flex: 1: /# 如 果 没 声明 ，Firefox 19- 将 溢出 h， 禾 盖 宽 度 */ 


background: white: 
} 


在 新 语法 中 , 没有 必要 给 边栏 设置 宽度 ,因为 它们 同样 会 使 用 20% 的 比例 填充 剩余 的 40% 空 间 。 
但 是 ， 如 果 不 显示 设置 宽度 ， 在 老 的 语法 下 会 直接 朋 尝 。 

完成 初步 布局 之 后 ， 需 要 重新 排列 顺序 。 这 里 设计 主 内 容 排 列 在 中 间 ， 但 在 源码 之 中 ， 它 是 排 
列 在 第 一 的 位 置 。 使 用 Flexbox 可 以 非常 容易 实现 , 但 是 用 户 需 要 把 Flexbox 几 种 不 同 的 语法 混在 一 
起 使 用 ， 代 码 如 下 。 


.main-content { 
-webkit-box-ordinal-group: 2: 
-moz-box-ordinal-group: 2; 
-ms-flex-order: 2:; 
-webkit-order: 2; 
order: 2; 

} 

.main-nav { 
-webkit-box-ordinal-group: 1; 
-moz-box-ordinal-group: 1; 


。 385。 
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-ms-flex-order: 1; 
-webkit-order: 1: 
order: 1; 

} 

.main-sidebar { 
-webkit-box-ordinal-group: 3; 
-moz-box-ordinal-group: 3; 
-ms-flex-order: 3: 
-webkit-order: 3; 
order: 3: 





} 
11.4.3 案例: 设计 3 行 3 列 应 用 


a 本 例 借助 Flexbox 伸缩 盒 布局 , 设计 页 面 呈 现 3 行 3 列 布局 样式 , 同时 能 够 根据 窗口 自 适应 调整 
视频 潮解， 名 自 空间 ， 以 满 屏 显示 ， 效 果 如 图 11.21 所 示 。 





[| localhost/mysite/test.ht x Wn 
° 3 © (Dlocalhost/mysite/test.html 


Article 


Nav 


Footer 





11.21 3 行 3 列 布局 样式 效果 
页 面 主 要 代码 如 下 。 


<style type="text/css"> 

/# 基 本 样式 / 

* {margin: 0; padding: 0; 
-moz-box-sizing: border-box: 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 


* 386。 
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} 
html, body {height: 100%; color: #fff:} 
body { min-width: 100%; } 
header, section, nav, aslde, footer { display: block: text-align:center; font-size:2em: font-weight:bold; } 
header {/* 页 眉 框 样式 : 限 高 、 限 宽 */ 
background-color: hsla(200,10%,70%..5); 
min-height: 100px: padding: 10px 20px; 
min-width: 100%: 





} 
/# 主 体 区 域 框 样式 ; 满 宽 显示 */ 
section {min-width: 100%:;} 
上 # 导 航 框 样式 : 固定 宽度 */ 
nav {background-color: hsla(300,60%,20%,.9):padding: 190:wldth: 220px;} 
语文 档 栏 样 式 */ 
article {background-color: hsla(120,50%,50%,.9); padding: 1%:;} 
此 侧 边 栏 样式 弹性 宽度 */ 
aside {background-color: hsla(20,80%,80%,.9):; padding: 1%:;width: 220px:} 
footer {/* 页 脚 样式 : 限 高 、 限 宽 */ 
background-color: hsla(250,50%.,80%..9); 
min-height: 60px; padding: 1%; 
min-width: 100%: 
} 
body {/*flexbox 样式 */ 
旋 设 置 body 为 伸缩 容器 */ 
display: -webkit-box:/* 老 版 本 : 1OS 6-, Safari 3.1-6#/ 
display: -moz-box:/* 老 版 本 : Firefox 19- */ 
display: -ms-flexbox;/* 混 合 版 本 : IE10*/ 
display: -webkit-flex;/* 新 版 本 : Chrome*/ 
display: flex:/* 标 准 规范 : Opera 12.1, Firefox 20+*/ 
诈 伸 缩 项 目 换行 */ 
-moz-box-orient: vertical: 
-webkit-box-orient: vertical: 
-moz-box-direction: normal: 
-moz-box-direction: normal: 
-moz-box-lines: multiple:; 
-webkit-box-lines: multiple; 
-webkit-flex-flow: column wrap: 


-ms-flex-flow: column wrap:; 
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11.5 在 线 练 习 


Flexbox 3 个 不 同 版 本 的 规范 对 应 着 不 同 的 实现 。 需要 关注 哪个 版 本 , 取决 于 需要 支持 的 浏览 器 。 
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使 用 CSS3 设计 动态 梓 式 


CSS3 动画 包括 过 渡 动 画 和 关键 帧 动画 ,主要 通过 改变 CSS 属性 值 来 模拟 实现 。 本 章 将 
详细 介绍 Transform、Transitions 和 Animations 三 大 功能 模块 ， 其 中 Transform 实现 对 网 页 


对 象 的 变形 操作 ，Transitions 实现 CSS 属性 的 过 渡 变 化 ，Animations 实现 CSS 样式 分 步 式 
演示 效果 。 


【 学 习 要 点 】 

MI 设计 对 象 变形 操作 。 

Dl 设计 过 渡 样 式 。 

Pl 设计 关键 帧 动画 。 

PI 能 够 灵活 使 用 CSS3 动画 设计 页 面 特 效 。 


第 ]2 章 使 用 CSS3 设计 动态 样式 





12.1 CSS3 变形 


2012 年 9 月 ，W3C 发 布 了 CSS3 变形 工作 草案 。CSS3 变形 允许 CSS 把 元 素 转变 为 2D 或 3D ET 


空间 ， 这 个 草案 包括 CSS3 2D 变形 和 CSS3 3D 变形 。 
权威 参考 : http://www.w3.org/TR/css-transforms-1/。 


12.1.1 认识 Transform 


CSS3 变形 是 多 种 效果 的 集合 ， 如 旋转 、 缩 放 、 平 移 和 倾斜 等 ， 每 个 效果 都 被 称 为 变形 函数 ， 它 
们 可 以 操控 元 素 发 生 旋 转 、 缩 放 、 平 移 和 倾斜 等 变化 。 在 CSS3 之 前 ， 实 现 类 似 的 效果 都 需要 图 片 、 
Flash 或 JavaScript 才能 完成 。 而 使 用 纯 CSS 来 完成 这 些 变形 则 无 须 加 载 这 些 额 外 的 文件 ， 提 高 了 开 
发 效率 和 页 面 的 执行 效率 。 

CSS3 变形 包括 3D 变形 和 2D 变形 ，3D 变形 使 用 基于 2D 变形 的 相同 属性 ， 如 果 了 解 了 2D 变 
形 ， 会 发 现 3D 变形 与 2D 变形 的 功能 类 似 。 

CSS 2D Transform 获得 了 各 主流 浏览 器 的 文 持 ， 但 是 CSS 3D Transform 文 持 程度 不 是 很 完善 。 
考虑 到 浏览 器 兼容 性 ，3D 变形 在 实际 应 用 时 应 添加 私有 属性 ， 并 且 个 别 属 性 在 某 些 主流 浏览 器 中 并 
it 简单 说 明 如 下 。 

在 正 10+ 中 ，3D 变形 部 分 属性 未 得 到 很 好 的 支持 。 

Firefox10.0 一 Firefox15.0 版 本 的 浏览 器 ， 在 使 用 3D 变形 时 需要 添加 私有 属性 -moz-， 但 从 

Firefox16.0+ 版 本 开始 无 须 添加 浏览 堪 私 有 属性 。 

Chrome 12.0+ 版 本 中 使 用 3D 变形 时 需要 添加 私有 属性 -webkit-。 

Safari 4.0+ 版 本 中 使 用 3D 变形 时 需要 添加 私有 属性 -webkit-。 

Operal5.0+ 版 本 才 开 始 支 持 3D 变形 ， 使 用 时 需要 添加 私有 属性 -webkait-。 

移动 设备 中 ，1OS Safari 3.2+、Android Browser 3.0+、Blackberry Browser 7.0+、Opera 
Mobile 24.0+、Chrome for Android 25.0+ 都 支持 3D 变形 ， 但 在 使 用 时 需要 添加 私有 属性 
-webkit-; Firefox for Android 19.0+ 支 持 3D 变形 ， 且 无 须 添 加 浏览 器 私有 属性 。 


12.1.2 ”设置 原点 


CSS 变形 的 原点 默认 为 对 象 的 中 心 点 (50% 50%)， 使 用 transform-origin 属性 可 以 重新 设置 新 的 
变形 原点 ， 语法 格式 如 下 。 


多 多 的 的 


transform-origin: [ <percentage> | <length> | left | centerQ) | right ] [ <percentage> | <length> | top | center® | 
bottom ]? 


取 值 简单 说 明 如 下 。 

加 ”<percentage>: 用 百分比 指定 坐标 值 。 可 以 为 负 值 。 
四 ”<length>: 用 长 度 值 指定 坐标 值 。 可 以 为 负 值 。 

四 left: 指定 原点 的 横 坐 标 为 left。 
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centerQ): 指定 原点 的 横 坐 标 为 center。 
right: 指定 原点 的 横 坐 标 为 right。 
top: 指定 原点 的 纵 坐 标 为 top。 
center(2): 指定 原点 的 纵 坐 标 为 center。 
bottom: 指定 原点 的 纵 坐 标 为 bottom。 
【示例 】 通 过 重 置 变 形 原点 ， 可 以 设计 不 同 的 变形 效果 。 在 本 示例 中 以 图 像 的 右上 角 为 原点 逆 时 
针 旋 转 图 像 45”， 则 比较 效果 如 图 12.1 所 示 。 


多 多 的 的 的 


襄 localhost:8080/mysite/ x WW 将 


CG | © localhost:8080/mysite/test.html 








图 12.1 自 定义 旋转 原点 效果 
示例 代码 如 下 。 


<style type="text/css"> 

img {/* 固定 两 幅 图 像 相同 大 小 和 相同 显示 位 置 */ 
position: absolute; 
left: 20px; 
top: 10px; 
width: 170px; 
width: 250px; 

} 

img.bg {/* 设置 第 1 幅 图 像 作为 参考 */ 
opacity: 0.3; 
border: dashed 1px red; 

} 

img.change {/* 变形 第 2 幅 图 像 */ 
border: solid 1px red; 


ry 
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transform-origin: top right: 旋 以 右上 角 为 原点 进行 变形 */ 
transform: rotate(-4Sdeg): /# 道 时 针 旋 转 45”*/ 

} 

</style> 


<lmg class="bg" src="1mages/]1.jpg"> 
<lmg class="change" src="l1mages/]1.jpg"> 


12.1.3 2D 旋转 
rotate(0) 函 数 能 够 在 2D 空间 内 旋转 对 象 ， 语 法 格式 如 下 。 





rotate(<angle>) 


参数 angle 表示 角度 值 ， 取 值 单 位 可 以 是 : 度 ， 如 90deg (90”, 一 圈 360”); 梯度 ， 如 100grad 
(相当 于 90”,，360” 等 于 400grad); 弧度 ,如 1.57rad( 约 等 于 90”, 360” 等 于 2x); 圈 ， 如 0.2Stum 
(等 于 90。 ，360" 等 于 ltum )。 


口 Ilocalhost:8080/mysite/ x 最 





【示例 】 以 12.1.2 节 示 例 为 基础 ， 本 示例 按 默认 原点 逆 时 针 旋转 图 像 45”， 代 码 如 下 ， 演 示 效果 | 
如 图 12.2 所 示 。 
img.change { 
border: solid 1px red; | 
transform: rotate(-45deg); | 





GC | © localhost:8080/mysite/test.html 
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图 12.2 ”旋转 效果 
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12.1.4 2D 缩放 


scale0 〇 函数 能 够 缩放 对 象 大 小 ， 语 法 格式 如 下 。 


scale(<number>|[, <number>]) 





该 国 数 包含 两 个 参数 值 ， 分 别 用 来 定义 宽 和 高 的 缩放 比例 ， 取 值 简单 说 明 如 下 。 

四 ”如 果 取 值 为 正 数 ， 则 基于 指定 的 宽度 和 高 度 放 大 或 缩小 对 象 。 

四 ”如 果 取 值 为 负数 ， 则 不 会 缩小 元 素 ， 而 是 翻转 元 素 〈 如 文字 被 翻转 )， 然 后 再 缩放 元 素 。 

四 ”如 果 取 值 为 小 于 1 的 小 数 〈 如 0.5)， 可 以 缩小 元 素 。 

四 ”如 果 第 2 个 参数 省 略 ， 则 第 2 个 参数 等 于 第 1 个 参数 值 。 

【示例 】 继 续 以 12.1.2 节 示例 为 基础 ， 本 示例 按 默 认 原点 把 图 像 缩小 为 原来 的 二 分 之 一 ， 代 码 如 
下 ， 演 示 效 果 如 图 12.3 所 示 。 


Img.change { 
border: solid 1px red; 
transform: scale(0.5); 





口 localhost:8080/mysite x WW" 


G | © localhost:8080/mysite/test.html 





图 12.3 缩小 对 象 的 效果 
12.1.5 2D 平移 
translate() 函 数 能 够 平移 对 象 的 位 置 ， 语 法 格式 如 下 。 





translate(<translation-value>|[, <translation-value>]) 


.394 . 
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该 函数 包含 两 个 参数 值 ， 分 别 用 来 定义 对 象 在 x 轴 和 y 轴 相对 于 原点 的 偏 移 距 离 。 如 果 省 略 参 
数 ， 则 默认 值 为 0。 如果 取 负 值 ， 则 表示 反 向 偏 移 ， 参 考 原点 保持 不 变 。 

【示例 】 本 示例 将 设计 向 右 下 角 方向 平移 图 像 ， 其 中 x 轴 偏 移 150 像素 ，y 轴 偏 移 50 像素 ,代码 
如 下 ， 演 示 效 果 如 图 12.4 所 示 。 


img.change { 
border: solid 1px red; 
transform: translate(150px, 50px): 











} 
口 localhost:8080/mysite/ x WN 
C | © localhost:8080/mysite/test.html 
图 12.4 平移 对 象 效果 

ele 
12.1.6 ”2D 倾斜 | 3 
skew0 函 数 能 够 倾斜 显示 对 象 ， 语 法 格式 如 下 。 / Ei 
skew(<angle> [, <angle>]) 


该 函数 包含 两 个 参数 值 ， 分 别 用 来 定义 对 象 在 x 轴 和 y 轴 倾 斜 的 角度 。 如 果 省 略 参数 ， 则 默认 
值 为 0。 与 rotate0 函 数 不 同 ，rotate0 函 数 只 是 旋转 对 象 的 角度 ， 而 不 会 改变 对 象 的 形状 ，skew0 〇 函数 
会 改变 对 象 的 形状 。 

【示例 】 本 示例 将 使 用 skew0O 函 数 变 形 图 像 ，x 轴 倾 和 斜 30”，y 轴 倾 斜 20”， 人 代码 如 下 ， 效 果 如 
图 12.5 所 示 。 
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Img.change { 
border: solid 1px red: 


transform: skew(30deg, 20deg); 





口 localhost:8080/mysite x WN 


GC | © localhost:8080/mysite/test.html 








图 12.5 倾斜 对 象 效 果 
12.1.7 2D 和 矩阵 
matrix0 是 一 个 矩阵 函数 ， 它 可 以 同时 实现 缩放 、 旋 转 、 平 移 和 倾斜 操作 ， 语 法 格式 如 下 。 





matrix(<number>, <number>, <number>, <number>, <number>, <number>) 


该 函数 包含 6 个 值 ， 具 体 说 明 如 下 。 
名 第 1 个 参数 控制 x 轴 缩 放 ; 
四 第 2 个 参数 控制 x 轴 倾 斜 ; 
四 第 3 个 参数 控制 y 轴 倾 斜 ; 
四 ”第 4 个 参数 控制 y 轴 缩 放 ; 
四 第 5 个 参数 控制 x 轴 平 移 ; 
第 6 个 参数 控制 y 轴 平 移 。 
【示例 】 本 示例 将 使 用 matrixO 函 数 模 拟 12.1.6 节 示 例 的 倾斜 变形 操作 ， 代 码 如 下 ， 效 果 类 似 
图 12.5 所 示 效 果 。 


四 


img.change { 
border: solid 1px red: 
transform: matrix(1, 0.6, 0.2, 1, 0, 0); 


“ye 
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【补充 了】 
多 个 变形 函数 可 以 在 一 个 声明 中 同时 定义 ， 代 码 如 下 。 
dv { 
transform: translate(80, 80): 
transform: rotate(45deg); 
transform: scale(1.5, 1.5); 
} 


针对 上 面 的 样式 ， 可 以 简化 为 如 下 代码 。 


div { transform: translate(80, 80) rotate(45Sdeg) scale(1.5, 1.5);} 


12.1.8 设置 变形 类 型 


CSS3 变形 包括 2D 和 3D 两 种 类 型 , 使 用 transform-style 属性 可 以 设置 CSS 变形 的 类 型 , 语法 格 
式 如 下 。 


transform-style: flat | preserve-3d 


取 值 简单 说 明 如 下 。 

名 ”flat: 指定 子 元 素 定 位 在 该 元 素 所 在 平面 内 进行 变形 ， 即 2D 平面 变形 ， 为 默认 值 。 

四 ”preserve-3d: 指定 子 元 素 定 位 在 三 维 空间 内 进行 变形 ， 即 3D 立体 变形 。 

【示例 】 借 助 12.1.7 节 示 例 ， 本 示例 使 用 <div id="box"> 容 器 包 庄 两 幅 图 像 ， 改 进 后 的 HTML 
结构 如 下 。 


<div 1d="box"> 
<1img class="bg" src="images/]1.jpg"> 
<lmg class="change" src="images/1.Jjpg"> 


</div> 
为 <div id="box"> 容 器 设置 CSS3 变形 类 型 为 3D， 样 式 代码 如 下 。 


#box { 
transform-style: preserve-3d; 


} 
为 change 图 像 应 用 3D 顺 时 针 旋 转 45”，CSS 样式 如 下 。 在 浏览 器 中 预览 ， 如 图 12.6 所 示 。 


Img.change { 
border: solid 1px red: 
transform: translate3d(60px, 60px, 400px); 
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口 localhost:8080/mysite/ x 风 








图 12.6 3D 平移 效果 


12.1.9 ”设置 透视 距离 和 原点 


Se 3D 变形 与 2D 变形 最 大 的 不 同 就 在 于 其 参考 的 坐标 轴 不 同 : 2D 变形 的 坐标 轴 是 平面 的 ， 只 存在 
视频 讲解 x 轴 和 y 轴 ， 而 3D 变形 的 坐标 轴 则 是 x、y、z 这 3 条 轴 组 成 的 立体 空间 ，x 轴 正 向 、y 轴 正 向 、z 轴 
正 同 分 别 朝 同 右 、 下 和 屏幕 外 ， 示 意图 如 图 12.7 所 示 。 








12.7 3D 坐标 轴 示 意图 
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透视 是 3D 变形 中 最 重要 的 概念 。 如 果 不 设 置 透视 ， 元 素 的 3D 变形 效果 将 无 法 实现 。 在 上 节 示 
例 中 ,使 用 函数 rotateX(45deg) 将 图 像 以 x 轴 方向 为 轴 沿 顺 时 针 旋 转 45”， 由 于 没有 设置 透视 样式 的 
效果 ， 可 以 看 到 浏览 器 将 图 像 的 3D 变形 操作 垂直 投射 到 2D 视 平 面 上 ， 最 终 呈现 出 来 的 只 是 图 像 的 
宽 高 变化 。 
【示例 1】 在 上 节 示 例 基础 上 ， 在 <div id="box"> 容 器 外 设置 透视 点 距离 为 1200 像素 ， 样 式 代 码 
如 下 。 


body{ 





perspective: 1200px: 
} 


在 浏览 占 中 可 以 看 到 如 图 12.8 所 示 的 变形 效果 。 


口 localhost:8080/mysite/ x Wn 





所 C ] © localhost:8080/mysite/test1.html 








图 12.8 沿 X 轴 3D 旋转 45” 效 果 图 
基于 对 上 面 示 例 的 直观 体验 ， 下 面 来 了 解 几 个 核心 概念 变形 元 素 、 观 察 者 和 被 透视 元 素 ， 关 
系 如 图 12.9 所 示 。 

回 变形 元 素 : 需要 进行 3D 变形 的 元 素 。 主 要 用 来 设置 transform、 transform-origin、 
backface-visibility 等 属性 。 

四 ”观察 者 : 浏览 器 模拟 出 来 的 用 于 观察 被 透视 元 素 的 一 个 没有 尺寸 的 点 ， 观 察 者 发 出 视线 ， 
类 似 于 一 个 点 光源 发 出 光线 。 

贸 ”被 透视 元 素 : 被 观察 者 观察 的 元 素 ， 根 据 属性 设置 不 同 ， 它 有 可 能 是 变形 对 象 本 里 ， 也 可 
能 是 它 的 父 级 或 祖先 元 素 ， 主 要 用 来 设置 perspective、perspective-origin 等 属性 。 
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x 轴 






被 观察 的 元 素 ( 绿 ) 







屏幕 〈 灰 ) 






变形 元 素 最 终 呈 现 
效果 ( 红 ) 


“mm 变形 元 素 ( 蓝 ) 


1 
! 








y 轴 


观察 者 可 移动 区 域 〈 黄 ) 


z 轴 
12.9 ”变形 元 素 、 观 察 者 和 被 透视 元 素 位 置 关 系 示 意图 
1. 透视 距离 
透视 距离 是 指 观察 者 沿 着 平行 于 z 轴 的 视线 与 屏幕 之 间 的 距离 ， 如 图 12.10 所 示 。 
x 轴 


对 


屏幕 ( 


`、 透视 距离 (虚线 ) 






y 轴 


观察 者 
图 12.10 ”透视 距离 示意 图 


使 用 perspective 属性 可 以 定义 透视 距离 ， 语 法 格式 如 下 。 
perspective: none | <length> 


取 值 简单 说 明 如 下 。 

名 ”none: 不 指定 透视 。 

四 ”<length>: 指定 观察 者 距离 平面 的 距离 ， 为 元 素 及 其 内 容 应 用 透视 变换 。 

注意 ， 透 视 距 离 不 可 为 0 和 负数 ， 因 为 观察 者 与 屏幕 距离 为 0 时 或 者 在 屏幕 背面 时 是 不 可 以 观 
察 到 被 透视 元 素 的 正面 的 。perspective 也 不 可 取 上 自分 比 ， 因 为 百分比 需要 相对 的 元 素 ,， 但 z 轴 并 没有 
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可 相对 的 元 素 尺寸 。 | 
一 般 地 ， 物 体 离 得 越 远 ， 显 得 越 小 。 反 映 在 perspective 属性 上 ， 就 是 该 属性 值 越 大 ， 元 素 的 3D | 
变形 效果 越 不 明显 。 
设置 perspective 属性 的 元 素 就 是 被 透视 元 素 。 一 般 地 ， 该 属性 只 能 设置 在 变形 元 素 的 父 级 或 祖 
先 级 。 因 为 浏览 器 会 为 其 子 级 的 变形 产生 透视 效果 ， 但 并 不 会 为 其 自身 产生 透视 效果 。 应 用 示例 可 国 区 必 
以 参考 本 节 示例 1。 
2. 透视 原点 


透视 原点 是 指 观察 者 的 位 置 ， 一 般 观 察 者 位 于 与 屏幕 平行 的 另 一 个 平面 上 ， 观 察 者 始终 是 与 屏 
得 垂直 的 。 观 察 者 的 活动 区 域 是 被 观察 元 系 的 盒 模型 区 域 ， 示 意图 如 图 12.11 所 示 。 


x 轴 





被 观察 的 元 素 ( 绿 ) 


屏幕 ( 灰 ) 





YS bottom'right 


y 轴 观察 者 可 移动 区 域 ( 黄 ) 
图 12.11 下 面 方形 区 域 为 透视 原点 的 位 置 区 域 


使 用 perspective-origin 属性 可 以 定义 透视 点 的 位 置 ， 语 法 格式 如 下 。 


perspective-origin: [ <percentage> | <length> | left | center(CD) | right ] [ <percentage> | <length> | top | center®) | 
bottom 1? 


取 值 简单 说 明 如 下 。 

<percentage>: 用 百分比 指定 透视 点 坐标 值 ， 相 对 于 元 素 宽 度 。 可 以 为 负 值 。 
<length>: 用 长 度 值 指定 透视 点 坐标 值 。 可 以 为 负 值 。 

left: 指定 透视 点 的 横 坐 标 为 left。 

center(1): 指定 透视 点 的 横 坐 标 为 center。 

right: 指定 透视 点 的 横 坐 标 为 night。 

top: 指定 透视 点 的 纵 坐 标 为 top。 

centerC): 指定 透视 点 的 纵 坐 标 为 center。 

bottom: 指定 透视 点 的 纵 坐 标 为 bottom。 


加 加 加 加 轴 辐 名 名 
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【示例 2】 在 示例 1 的 基础 上 ， 设 置 观察 点 位 置 在 右 侧 居 中 位 置 。 代 码 如 下 ， 显 示 效 果 如 图 12.12 
所 示 。 


全 body{ 
‘Note perspective: 1200px; 


perspective-origin: right:; 


口 localhost:8080/mysite x WO 


一 G | @O localhost:8080/mysite/test2.html 





图 12.12 设置 观察 点 位 置 在 右 侧 的 效果 
12.1.10 3D 平移 


3D 平移 主要 包括 下 面 4 个 函数 。 

translatex(<translation-value>): 指定 对 象 X 轴 “水平 方向) 的 平移 。 
translatey(<translation-value>): 指定 对 象 y 轴 〈 告 直 方向 ) 的 平移 。 

translatez(<length>): 指定 对 象 z 轴 的 平移 。 
translate3d(<translation-value>,<translation-value>,<length>): 指定 对 象 的 3D 平移 。 第 1 个 参 
数 对 应 x 轴 ， 第 2 个 参数 对 应 y 轴 ， 第 3 个 参数 对 应 z 轴 ， 参 数 不 允 许 省 略 。 

参数 <translation-value> 表 示 <length> 或 <percentage>， 即 x 轴 和 y 轴 可 以 取 长 度 值 或 百分比 ， 但 





多 多 的 的 


是 z 轴 只 能 够 设置 长 度 值 。 

【示例 】 本 示例 设计 图 像 在 3D 空间 中 平移 ， 使 其 呈现 一 种 错位 效果 。 代 码 如 下 ， 效 果 如 图 12.13 
所 示 。 

#box { 


transform-style: preserve-3d: 
perspective: 1200px; 

} 

Img.change { 
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border: solid 1px red: 
transform: translate3d(200px, 30px, 60px): 


品 localhost8080/mysite/ x WN 





一 GCG | © localhost:8080/mysite/test.html 








图 12.13 定义 3D 平移 效果 


从 图 12.13 可 以 看 出 ， 当 z 轴 值 越 大 时 ， 元 系 离 浏览 者 越 近 ， 视 党 上 元 际 束 变 得 更 大 ; 反之 其 值 
越 小 时 ， 元 素 也 离 观看 者 越 远 ， 视 觉 上 元 系 束 变 得 更 小 。 


空 提示 : translatez0O 函 数 在 实际 使 用 中 等 效 于 translate3d(0,0,tz)。 仅 从 视觉 效果 上 看 ，translatez() 
和 translate3d(0.0,tz) 函 数 功 能 非常 类 似 于 二 维 空间 的 scale0 缩 放 函 数 ,但 实际 上 完全 不 同 。 
translatez() 和 translate3d(0,0,tz) 变 形 是 发 生 在 z 轴 上 ， 而 不 是 XxX 轴 和 yy 轴 。 


12.1.11 3D 缩放 


3D 缩放 主要 包括 以 下 4 个 函数 。 忻 洋 
scalex(<number>): 指定 对 象 x 轴 的 (水 平方 向 ) 缩放 。 视频 时 
scaley(<number>): 指定 对 象 y 轴 的 (垂直 方 同 ) 缩放 。 
scalez(<number>): 指定 对 象 的 z 轴 缩放 。 
scale3d(<number>,<number>,<number>): 指定 对 象 的 3D 缩放 。 第 1 个 参数 对 应 x 轴 ， 第 2 
个 参数 对 应 y 轴 ， 第 3 个 参数 对 应 z 轴 ， 参 数 不 允 许 省 略 。 
参数 <number> 为 一 个 数字 ， 表 示 缩 放 倍数 ， 可 参考 2D 缩放 参数 说 明 。 
【示例 】 以 上 面 示例 为 基础 ， 在 x 轴 和 y 轴 上 放大 图 像 1.5 倍 ，z 轴 上 放大 图 像 两 倍 ， 然 后 使 用 
translatex() 把 变形 的 图 像 移 到 右 侧 显示 ， 以 便 与 原 图 进行 比较 。 代 码 如 下 ， 演示 效 果 如 图 12.14 所 示 。 


img.change { 





四 加 加 多 


.403 。 





border: solid 1px red: 
transform: scale3D(]1.5,1.5,2) translatex(240px): 





口 localhost:8080/mysite, x nl 


€ GG | © localhost:8080/mysite/test.html 





图 12.14 定义 3D 缩放 效果 


12.1.12 3D 旋转 


3D 旋转 主要 包括 下 面 4 个 函数 。 

rotatex(<angle>): 指定 对 象 在 x 轴 上 的 旋转 角度 。 

rotatey(<angle>): 指定 对 象 在 y 轴 上 的 旋转 角度 。 

rotatez(<angle>): 指定 对 象 在 z 轴 上 的 旋转 角度 。 
rotate3d(<number>,<number>,<number>,<angle>): 指定 对 象 的 3D 旋转 角度 ， 其 中 前 3 个 参 
数 分 别 表 示 旋 转 的 方向 x、y、z， 第 4 个 参数 表示 旋转 的 角度 ， 参 数 不 允 许 省 略 。 





的 的 的 


会 提示 : rotate3dO 却 数 前 3 个 参数 值 分 别 用 来 描述 围绕 x、y、z 轴 旋 转 的 矢量 值 。 最 终 变形 元 素 

以 由 (0,0,0) 和 (x,y,z) 这 两 个 点 构成 的 直线 为 轴 进 行 旋转 。 当 第 4 个 参数 为 正 数 时 ， 元素 进 
行 顺 时 针 旋 转 ; 当 第 4 个 参数 为 负数 时 ， 元素 进行 逆 时 针 旋 转 。 

rotate3d() 函 数 可 以 与 前 面 3 个 旋转 函数 进行 转换 ， 简 单 说 明 如 下 。 

四 ”rotatex(a) 函 数 功 能 等 同 于 rotate3d(1,0,0,a)。 

四 ”rotatey(a) 函 数 功 能 等 同 于 rotate3d(0,1,0,a)。 

名 ”rotatez(a) 函 数 功 能 等 同 于 rotate3d(0,0,1,a)。 

【示例 】 以 12.1.11 节 示 例 为 基础 ， 使 用 rotate3d0 函 数 顺 时 针 旋 转 图 像 45”， 其 中 x 轴 、y 轴 和 
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z 轴 比值 为 2>、2、1。 人 代码 如 下 ， 效 果 如 图 12.15 所 示 。 


Img.change { 
border: solid 1px red: 
transform: rotate3d(2,2,1,45deg); 





口 localhost:8080/mysite/ x Wn 


cc Cs | © localhost:8080/mysite/test.html 





图 12.15 定义 3D 旋转 效果 


12.1.13 ”透视 函数 
perspective 属性 可 以 定义 透视 距离 , 它 必须 应 用 在 变形 元 素 的 父 级 或 祖先 级 元 素 上 。 而 透视 函数 
perspectiveO 是 transform 变形 函数 的 一 个 属性 值 ， 可 以 应 用 于 变形 元 素 本 身 。 有 具体 语法 格式 如 下 。 频 时 


perspective(<length>) 


参数 是 一 个 长 度 值 ， 值 只 能 是 正 数 。 
【示例 】 本 示例 设计 图 像 在 x 轴 上 旋转 120”, 透视 距离 为 1200 像素 。 代码 如 下 , 效果 如 图 12.16 
所 示 。 


#box { transform-style: preserve-3d;} 

img.change { 
border: solid 1px red: 
transform:perspective(180px) rotateX(120deg); 
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口 localhost:8080/mysite/ x WN 


一 GG | © localhost:8080/mysite/test.html 





图 12.16 定义 3D 旋转 效果 
< 八 注意 : 由 于 transform 属性 是 从 前 向 后 的 顺序 解析 属性 值 的 ， 所 以 一 定 要 把 perspectiveO 〇 函数 写 
在 其 他 变形 函数 前 面 ， 否 则 将 没有 透视 效果 。 
perspective-origin 只 能 设置 在 设置 了 perspective 透视 属性 的 元 素 上 。 若 为 元 素 设 置 透 视 函 数 
perspective 〇 )， 则 透视 原点 不 起 作用 。 观 察 者 使 用 默认 位 置 ， 即 元 素 中 心 点 对 应 的 平面 上 。 
12.1.14 ”变形 原点 


2D 变形 原点 由 于 没有 z 轴 ， 所 以 z 轴 的 值 默认 为 0。 在 3D 变形 原点 中 ，z 轴 是 一 个 可 以 设置 的 
变量 。 语 法 格式 如 下 。 


transform-origin:x 轴 y 轴 z 轴 


取 值 简单 说 明 如 下 。 

四 x 轴 : left | center | right | <length> | <percentage>。 

四 yy 轴 : top | center | bottom | <length> | <percentage>。 

回 z 轴 : <length>。 

对 于 x 轴 和 y 轴 来 说 ， 可 以 设置 关键 字 和 百分比 ， 分 别 相 对 于 其 本 身 元 素 水 平方 辐 的 宽度 和 重 
直方 向 的 高 度 ， 而 z 轴 只 能 设置 长 度 值 。 


12.1.15” 育 景 可 见 


元 和 的 背面 在 默认 情况 下 是 可 见 的 ， 有 时 可 能 需要 让 元 素 背 面 不 可 见 ， 这 时 候 就 可 以 使 用 
: backface-visibility 属性 ， 该 属性 的 具体 语法 格式 如 下 。 


backface-visibility: visible | hidden 
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取 值 简单 说 明 如 下 。 
加 visible: 指定 元 素 背 面 可 见 ， 人 允许 显示 正面 的 镜像 ， 为 默认 值 。 
四 “hidden: 指定 元 素 背 面 不 可 见 。 / 


【示例 】 以 12.1.13 节 的 示例 为 基础 ， 在 变形 图 像样 式 中 添加 backface-visibility: hidden:， 定 义 元 
素 背面 面向 用 户 时 不 可 见 ， 这 时 再 次 预览 ， 会 发 现 变形 图 像 已 经 不 存在 ， 因 为 它 的 背面 面向 用 户 ， 革 SL 
被 隐藏 了 。 代 码 如 下 ， 效 果 如 图 12.17 所 示 。 


img.change { 
border: solid 1px red; 
transform:perspective(180px) rotateX(120deg); 
backface-visibility: hidden; 





口 localhost:8080/mysite/ x WN 





€ GC | © localhost:8080/mysite/test.html 








图 12.17 定义 背面 面向 用 户 不 可 见效 果 
12.2 过 渡 动 男 


2013 年 2 月 , W3C 发 布 了 CSS Transitions 工作 草案 , 在 这 个 草案 中 描述 了 CSS 过 渡 动 画 的 基本 ， 

实现 方法 和 属性 。 目 前 获得 了 所 有 浏览 器 的 支持 ， 包 括 支持 带 有 前 级 (私有 属性 ) 或 不 带 前 组 的 过 

渡 (标准 属性 )。 最 新 版 本 浏览 器 (IE 10+、Firefox 16+ 和 Opera 12.5+) 均 支 持 不 带 前 级 的 过 渡 属 性 

transition, 而 旧版 浏览 器 则 支持 带 有 前 级 的 过 渡 属 性 , 如 Webkit 引擎 支持 -webkit-transition 私有 属性 ， 

Mozilla Gecko 引擎 支持 -moz-transition 私有 属性 ，Presto 引擎 支持 -o-transition 私有 属性 , IE 6~IE9 ， 

浏览 器 不 支持 transition 属性 ，IE10 支持 transition 属性 。 
权威 参考 : http://www.w3.org/TR/css3-transitions/。 


.407 。 
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12.2.1 设置 过 渡 属 性 


transition-property 属性 用 来 定义 过 渡 动 画 的 CSS 属性 名 称 ， 基 本 语法 如 下 。 

transition-property:none | all | [ <IDENT> | |[',' <IDENT> |*: 

取 值 简单 说 明 如 下 。 

名 ”none: 表示 没有 元 素 。 

四 all: 默认 值 ， 表 示 针 对 所 有 元 素 ， 包 括 :before 和 :after 伪 元 素 。 

四 IDENT: 指定 CSS 属性 列表 。 几 乎 所 有 色彩 、 大 小 或 位 置 等 相关 的 CSS 属性 ， 包 括 许多 新 
添加 的 CSS3 属性 ， 都 可 以 应 用 过 渡 ， 如 CSS3 变换 中 的 放大 、 缩 小 、 旋 转 、 斜 切 、 渐 变 等 。 


【示例 】 在 本 示例 中 ， 指 定 动画 的 属性 为 背景 颜色 。 这 样 当 鼠 标 指针 经 过 盒子 时 ， 会 自动 从 红色 
背景 过 渡 到 蓝 色 背景 。 代 码 如 下 ， 演 示 效 果 如 图 12.18 所 示 。 





<style type="text/css"> 
dv { 
margin: 10px auto: height: 80px; 
background: red: 
border-radius: 12px:; 
box-shadow: 2px 2px 2pX #999: 
} 
div:hover { 
background-color: blue; 
/# 指 定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color: 
} 
</style> 


<div></div> 


口 localhost:8080/m x WW 


G |© localhost:8080/my': 女 | : 





默认 状态 鼠标 指针 经 过 时 被 旋转 
图 12.18 定义 简单 的 背景 色 切 换 动画 


12.2.2 ”设置 过 渡 时 间 


transition-duration 属性 用 来 定义 转换 动 男 的 时 间 长 度 ， 基 本 语法 如 下 。 
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transition-duration:<time> [, <titme>]*: 


初始 值 为 0， 适用 于 所 有 元 素 ， 以 及 :before 和 :after 伪 元 素 。 在 默认 情况 下 ， 动画 过 渡 时 间 为 0s， 
所 以 当 指 定 元 素 动画 时 ， 会 看 不 到 过 渡 的 过 程 ， 直 接 看 到 结果 。 

【示例 】 以 12.2.1 节 示 例 为 基础 ， 本 示例 设置 动画 过 渡 时 间 为 2s， 当 鼠标 指针 移 过 对 象 时 ， 会 看 
到 背景 色 从 红色 逐渐 过 渡 到 蓝 色 。 代 码 如 下 ， 演 示 效 果 如 图 12.19 所 示 。 





div:hover { 
background-color: blue; 
人 指定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color:; 
族 指 定 动画 过 渡 的 时 间 */ 
transition-duration:2s:; 


DD localhost:8080/m x WN 


© localhost:8080/my: 


、 


图 12.19 设置 动画 时 间 
12.2.3 ”设置 延迟 过 渡 时 间 
transition-delay 属性 用 来 定义 开局 过 渡 动 画 的 延迟 时 间 ， 基 本 语法 如 下 。 








transition-delay:<time> [, <time>|*; 


初始 值 为 0， 适 用 于 所 有 元 素 ， 以 及 :before 和 :after 伪 元 素 。 设 置 时 间 可 以 为 正 整数 、 负 整数 和 
0， 非 零 的 时 候 必 须 设置 单位 是 s( 秒 ) 或 者 ms (毫秒 );， 为 负数 的 时 候 ， 过 渡 的 动作 会 从 该 时 间 点 
开始 显示 ， 之 前 的 动作 被 截断 ， 为 正 数 的 时 候 ， 过 渡 的 动作 会 延迟 触发 。 
【示例 】 继 续 以 12.2.1 节 示 例 为 基础 进行 介绍 ， 本 示例 设置 过 渡 动 画 推迟 2s 后 执行 ， 则 当 鼠 
标 指 针 移 过 对 象 时 ， 会 看 不 到 任何 变化 ， 过 了 2s 之 后 ， 才 发 现 背景 色 从 红色 逐渐 过 渡 到 蓝 色 ， 
代码 如 下 。 
div:hover { 
background-color: blue; 
诈 指 定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color:; ] 
族 指 定 动画 过 渡 的 时 间 */ 
transition-duration: 2S: | 
谍 指 定 动画 延 信 触发 */ 
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transition-delay: 2s; 
} 


12.2.4 ”设置 过 渡 动 画 类 型 
transition-timing-function 属性 用 来 定义 过 渡 动 画 的 类 型 ， 基 本 语法 如 下 。 


transition-timing-function:ease | linear | ease-In | ease-out | ease-1n-out | cubicbezier(<number>, <number>, 


<number>, <number>) [, ease | linear | ease-1n | ease-out | ease-1n-out | cubic-bezier(<number>, <number>,<number>, 





<number>)]* 


属性 初始 值 为 ease， 取 值 简单 说 明 如 下 。 

ease: 平滑 过 渡 ， 等 同 于 cubic-bezier(0.25, 0.1, 0.25, 1.0) 函 数 ， 即 立方 贝 赛 尔 。 
linear: 线性 过 渡 ， 等 同 于 cubic-bezier(0.0, 0.0, 1.0, 1.0) 函 数 。 

ease-in: 由 慢 到 快 ， 等 同 于 cubic-bezier(0.42, 0, 1.0, 1.0) 函 数 。 

ease-out: 由 快 到 慢 ， 等 同 于 cubic-bezier(0, 0, 0.58, 1.0) 函 数 。 

ease-in-out: 由 慢 到 快 再 到 慢 ， 等 同 于 cubic-bezier(0.42, 0, 0.58, 1.0) 函 数 。 

四 cublic-bezier: 特殊 的 立方 贝 塞 尔 曲线 效果 。 

【 示例】 继续 以 12.2.1 节 示 例 为 基础 进行 介绍 ， 本 示例 设置 过 渡 类 型 为 线性 ， 代 码 如 下 。 


和 多 国 的 的 


div:hover { 
background-color: blue; 
人 # 指 定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color:; 
上 指定 动画 过 渡 的 时 间 */ 
transition-duration: 10s: 
/# 指 定 动画 过 渡 为 线性 效果 */ 
transition-timing-function: linear:; 


} 
12.2.5 ”设置 过 渡 触 发 动作 


CSS3 过 渡 动 画 一 般 通 过 动态 伪 类 人 触发， 如 表 12.1 所 示 。 





表 12.1 CSS 动态 伪 类 


EYE 
i A 
:visited 访问 过 的 链接 
:hover 鼠标 指针 经 过 元 素 
:active 所 有 元 素 鼠标 单 击 元 素 
:focus 所 有 可 被 选中 的 元 素 元 素 被 选中 
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也 可 以 通过 JavaScript 事件 触发 ， 包 括 click、focus、mousemove、mouseover、mouseout 等 。 


1. :hover 


最 第 用 的 过 渡 触 发 方式 是 使 用 :hover 伪 类 。 
【示例 1】 本 示例 设计 当 鼠 标 指针 经 过 div 元 素 时 ,该 元 素 的 背景 颜色 会 在 经 过 1s 的 初始 延迟 后 ， 
于 2s 内 动态 地 从 绿色 变 为 蓝 色 ， 代 码 如 下 。 








2. :active 


:active 伪 类 表示 用 户 单 击 茶 个 元 素 并 按 住 鼠标 按键 时 显示 的 状态 。 

【示例 2】 本 示例 设计 当 用 户 单 击 div 元 素 时 , 该 元 素 被 激活 , 这 时 会 触发 动画 , 高 度 属性 从 200px 
过 渡 到 400px。 如 果 按 住 该 元 素 ， 保 持 住 活动 状态 ， 则 div 元 素 始终 显示 400px 高 度 ， 松 开 鼠 标 之 后 ， 
又 会 恢复 原来 的 高 度 。 代 码 如 下 ， 效 果 如 图 12.20 所 示 。 
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图 12.20 ”定义 激活 触发 动画 
3. :focus 


:focus 伪 类 通常 会 在 表单 对 象 接 收 键盘 啊 应 时 出 现 。 
【示例 3】 本 示例 将 设计 当 输 入 框 获取 焦点 时 ， 输 入 框 的 背景 色 逐 步 高 亮 显 示 。 代 码 如 下 ， 效 果 
如 图 12.21 所 示 。 





了 
二 
了 
2 
把 
一 
了 
了 
了 
一 
了 
二 
pd 
0 
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.evalecte- -ace 











12.21 定义 获取 焦点 触发 动画 


4. :checked 


:checked 伪 类 在 发 生 选 中 状况 时 触发 过 渡 。 
【示例 4】 本 示例 设计 当 复 选 框 被 选中 时 缓慢 缩 进 两 个 字符 。 代 码 如 下 ， 演示 效果 如 图 12.22 所 示 。 
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12.22 ”定义 被 选中 时 和 触发 动画 
5. 媒体 查询 
触发 元 素 状态 变化 的 另 一 种 方法 是 使 用 CSS3 媒体 查询 。 
【示例 5】 本 示例 设计 div 元 素 的 宽度 和 高 度 为 49%X200px， 如 果 用 户 将 窗口 大 小 调整 到 420px 
] 或 以 下 ， 则 该 元 素 将 过 渡 为 100%X 100px。 也 就 是 说 ， 当 窗口 宽度 变化 经 过 420px 的 阔 值 时 ， 将 会 
] 触发 过 渡 动 画 。 代 码 如 下 ， 演 示 效 果 如 图 12.23 所 示 。 





上 
- 
- 
[a 
[a 
Ep 
Ep 
2 
1 


.414 。 


ss 


第 ]2 章 使 用 CSS3 设计 动态 样式 一 
< 








x 


+) | @ http://localho... - SB 0 | @ localhost 





当 窗 口 小 于 等 于 420px 宽 度 当 窗 口 大 于 420px 宽 度 
12.23 ”设备 类 型 触发 动画 
如 果 网 页 加 载 时 用 户 的 窗口 大 小 是 420px 或 以 下 ， 浏 览 器 会 在 该 部 分 应 用 这 些 样式 ， 但 是 由 于 | 
不 会 出 现状 态 变化 ， 因 此 不 会 发 生 过 渡 。 
6. JavaScript 事件 


| 

! 

| 

| 

| 

1 

【示例 6】 本 示例 可 以 使 用 纯粹 的 CSS 伪 类 触发 过 渡 ， 为 了 方便 用 户 理解 ， 这 里 通过 jQuery 脚 ， 
本 触发 过 渡 ， 代 码 如 下 。 
| 

| 

| 

| 

| 

| 

! 
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.change { 
width: 100%:; 
height: 120px:; 





} 
</style> 


<input type="button" id="button" value=" 触 发 过 渡 动 画 " /> 
<div class="box"></div> 


文档 中 包含 一 个 box 类 的 盒子 和 一 个 按钮 ， 当 单 击 按钮 时 ，jQuery 脚本 会 将 盒子 的 类 切换 为 
”change， 从 而 触发 过 渡 动 画 ， 演 示 效 果 如 图 12.24 所 示 。 











默认 状态 JavaScript 事 件 激活 状态 
图 12.24 使 用 JavaScript 脚本 触发 动画 


上 面 示例 演示 了 样式 发 生变 化 会 导致 过 渡 动 画 ， 也 可 以 通过 其 他 方法 触发 这 些 变 化 ， 包 括 通过 
| JavaScript 脚本 动态 更 改 。 从 执行 效率 来 看 ， 事 件 通 常 应 当 通 过 JavaScript 触发 ， 简 单 动画 或 过 渡 则 
”应 使 用 CSS 触发 。 当 然 ， 这 只 是 一 般 指导 原则 ， 不 一 定 是 最 佳 选 择 ， 具 体 应 视 条 件 而 定 。 


12.3 上 帆 动 画 


2012 年 4 月 ，W3C 发 布 了 CSS Animations 工作 草案 ， 在 这 个 草案 中 描述 了 CSS 关键 帧 动画 的 
基本 实现 方法 和 属性 。 目 前 最 新 版 本 的 主流 浏览 器 都 支持 CSS 帧 动画 ， 如 了 正 10+、Firefox 和 Opera 
， 均 支持 不 带 前 绥 的 动画 属性 animation， 而 旧版 浏览 器 则 支持 前 级 的 动画 ， 如 Webkit 引擎 支持 
-webkit-animation 属性 , Mozilla Gecko 引擎 支持 -moz-animation 私有 属性 , Presto 引擎 支持 -o-animation 
”私有 属性 ，IE 6~ 全 9 浏览 器 不 支持 animation 属性 。 
权威 参考 : http://www.w3.org/TR/css3-animations/。 


12.3.1 设置 关键 帧 
CSS3 使 用 @keyframes 定义 关键 帧 ， 有 具体 用 法 如 下 。 
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(keyframes animationname { 


keyframes-selector { 
css-styles:; 
} 
} 
其 中 参数 说 明 如 下 。 


回 ”animationname: 定义 动画 的 名 称 。 

四 ”keyframes-selector: 定义 帧 的 时 间 未 知 , 也 就 是 动画 时 长 的 百分比 , 合法 的 值 包括 0 一 100%6、 

from (等 价 于 0)、to( 等 价 于 100% )。 

凶 ”css-styles: 表示 一 个 或 多 个 合法 的 CSS 样式 属性 。 

在 动画 过 程 中 ， 用 户 能 够 多 次 改变 这 套 CSS 样式 。 以 百分比 或 者 通过 关键 词 fom 和 to 来 定义 
样式 改变 发 生 的 时 间 。 为 了 获得 最 佳 浏览 嚣 支持， 设计 关键 帧 动画 时 ， 应 该 始终 定义 0 和 100% 位 置 
帧 。 最 后 ， 为 每 帧 定义 动态 样式 ， 同 时 将 动画 与 选择 器 绑 定 。 

【示例 】 本 示例 演示 了 如 何 让 一 个 小 方 盒 沿 着 方形 框 内 壁 匀速 运动 。 代 码 如 下 ， 效 果 如 图 12.25 
所 示 。 


<style> 
#wrap {/* 定义 运动 轨迹 包含 框 */ 
position:Trelative: /# 定义 定位 包含 杠 ， 避 人 免 小 盒子 跑 到 外 面 运动 */ 
border:solid 1px red: 
wildth:2S0px: helght:2S0px: 
} 
#box {/* 定义 运动 小 盒 的 样式 */ 
position:absolute; 
left:0: top:0: 


width: S0px: height: SOpx;: 
background: #93FB40; 
border-radius: 8px:; 
box-shadow: 2px 2px 2px #999;: 
/# 定 义 帧 动画 : 动画 名 称 为 ball， 动 画 时 长 5s， 动 画 类 型 为 匀速 渐变 ， 动 画 无 限 播放 */ 
animation: ball $s linear Infimlte: 
} 
上 必定 义 关 键 帧 : 共 包 括 5 帧 ， 分 别 在 总 时 长 0%9、25%、50%、75%、100% 的 位 置 */ 
/# 在 每 帧 中 设置 动画 属性 为 left 和 top， 让 它们 的 值 匀速 渐变 ， 产 生 运 动 动画 */ 
keyframes ball { 
0% {left:0:;top:0:} 
25% {left:200px;top:0;} 
50% {left:200px;top:200px;} 
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75% {left:0:top:200px:;} 
100% {left:0;top:0;} 

} 

</style> 





<div 1d="wrap"> 
<div 1d="box"></div> 
</div> 


ee 二 四- 参 http://localho... 仿 [7 已 localhost 














图 12.25 设计 小 盒子 运动 动画 


12.3.2 设置 动画 属性 
i Animations 功能 与 Transition 功能 相同 ， 都 是 通过 改变 元 素 的 属性 值 来 实现 动画 效果 的 。 它 们 的 
频 讲解 区 别 在 于 : 使 用 Transitions 功能 时 只 能 通过 指定 属性 的 开始 值 与 结束 值 ， 然 后 在 这 两 个 属性 值 之 间 
， 进行 平滑 过 渡 来 实现 动画 效果 ， 因 此 不 能 实现 比较 复杂 的 动画 效果 ; 而 Animations 则 通过 定义 多 个 
关键 帧 和 每 个 关键 帧 中 元 素 的 属性 值 来 实现 更 为 复杂 的 动画 效果 。 

1. 定义 动画 名 称 

使 用 animation-name 属性 可 以 定义 CSS 动画 的 名 称 ， 语 法 如 下 。 





animation-name:none | IDENT [, none | IDENT ]*: 
初始 值 为 none， 定 义 一 个 适用 的 动画 列表 。 每 个 名 字 是 用 来 选择 动画 关键 帧 的 ， 以 提供 动画 的 
属性 值 。 如 名 称 是 none， 那 么 就 不 会 有 动画 。 
2. 定义 动画 时 间 
使 用 animation-duration 属性 可 以 定义 CSS 动画 的 播放 时 间 ， 语 法 如 下 。 
animation-duration:<time> [, <time>]*: 


在 默认 情况 下 该 属性 值 为 0， 这 意味 着 动 画 周 期 是 0， 即 不 会 有 动 夯 。 当 值 为 负 值 时 ， 则 被 视 为 0。 
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3. 定义 动画 类 型 
使 用 animation-timing-function 属性 可 以 定义 CSS 动画 类 型 ， 语 法 如 下 。 


animation-timing-function:ease | linear | ease-In | ease-out | ease-1n-out | cubicbezier(<number>, <number>, 
number>, <number>) [, ease | linear |ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>,<number>, 


<number>)]* 

初始 值 为 ease， 取 值 说 明 可 参考 12.2.4 节 。 

4. 定义 延迟 时 间 

使 用 animation-delay 属性 可 以 定义 CSS 动画 延迟 播放 的 时 间 ， 语 法 如 下 。 

animation-delay:<time> [, <time>|]*; 

该 属性 允许 一 个 动画 开始 执行 一 段 时 间 后 才 被 应 用 。 当 动画 延迟 时 间 为 0, 即 默认 动画 延迟 时 间 ， 
则 意味 着 动画 将 尽快 执行 ， 否 则 该 值 指定 将 延迟 执行 的 时 间 。 

5. 定义 播放 次 数 

使 用 animation-iteration-count 属性 可 以 定义 CSS 动画 的 播放 次 数 ， 语 法 如 下 。 


animation-iteration-count:infinite | <number> [, infinite | <number>]*; 


默认 值 为 1， 这 意味 着 动画 将 从 开始 到 结束 播放 一 次 。infinite 表示 无 限 次 ， 即 CSS 动画 永远 重 
复 。 如 果 取 值 为 非 整 数 ， 将 导致 动画 结束 一 个 周期 的 一 部 分 。 如 果 取 值 为 负 值 ， 则 将 导致 在 交 蔡 周 
期 内 反问 播放 动画 。 


6. 定义 播放 方向 
使 用 animation-direction 属性 可 以 定义 CSS 动画 的 播放 方向 ， 基 本 语法 如 下 。 


animation-direction:normal | alternate [, normal | alternate|*; 


默认 值 为 normal。 当 为 默认 值 时 , 动画 的 每 次 循环 部 问 前 播放 。 男 一 个 值 是 altermate， 设置 该 值 
则 表示 第 偶数 次 回 前 播放 ， 第 奇数 次 回 反方 同 播放 。 


7. 定义 播放 状态 

使 用 animation-play-state 属性 可 以 定义 动画 正在 运行 还 是 暂停 ， 语 法 如 下 。 
animation-play-state: paused|running:; 

初始 值 为 running。 其 中 paused 定义 动画 已 暂停 ，running 定义 动画 正在 播放 。 


窑 提示 : 可 以 在 JavaScript 中 使 用 该 属性 ， 这 样 就 能 在 播放 过 程 中 暂停 动画 。 在 JavaScript 脚本 
中 的 用 法 如 下 。 


object.style.animationPlayState="paused" 
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8. 定义 播放 外 状态 
| 使 用 animation-fill-mode 属性 可 以 定义 动画 外 状态 ， 语 法 如 下 。 


animation-fill-mode: none | forwards | backwards | both [ , none | forwards | backwards | both |]* 





初始 值 为 none， 如 果 提 供 多 个 属性 值 ， 以 逗号 进行 分 隔 。 取 值 说 明 如 下 。 

加 none: 不 设置 对 象 动画 之 外 的 状态 。 

四 forwards: 设置 对 象 状态 为 动画 结束 时 的 状态 。 

四 backwards: 设置 对 象 状 态 为 动画 开始 时 的 状态 。 

四 both: 设置 对 象 状态 为 动画 结束 或 开始 时 的 状态 。 

【示例 】 本 示例 将 设计 一 个 小 球 ， 并 定义 它 水 平 同 左 运动 ， 动 画 结 束 之 后 ， 青 返回 起 始点 位 置 。 
代码 如 下 ， 效 果 如 图 12.26 所 示 。 


<style> 
谍 启 动 运动 的 小 球 ， 并 定义 动画 结束 后 返回 */ 
.ball{ 
width: S0px:; height: SOpx; 
background: #93FB40; 
border-radius: 100%: 
box-shadow:2px 2px 2px #999; 
animation:ball 1s ease backwards: 
} 
谨 定 义 小 球 水 平 运动 关键 帧 */ 
(@keyframes ball{ 
0% {transform:translate(0,0):} 
100% {transform:translate(400px):} 
} 
</style> 


<div class="ball"></div> 


< > 外 - 多 : http://localho… ~ 有 0 〗 龟 iocalhost 








图 12.26 设计 运动 小 球 最 后 返回 起 始点 位 置 
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12.4 案例 实战 


本 节 将 通过 多 个 案例 帮助 读者 上 机 练习 和 提升 CSS3 动画 的 设计 技法 。 
12.4.1 设计 图 形 


【示例 1) 设计 萎 形 。 制作 菱 形 的 方法 有 很 多 种 ， 本 例 使 用 transform 属性 和 rotate0 函 数 相 结 合 的 
方法 使 两 个 正 反 三 角形 上 下 显示 。 代 码 如 下 ， 效 果 如 图 12.27 所 示 。 





#shape { 
width: 120px; height: 120px:; 
background: #1eff00; 
margin: 60px auto: 
transform: rotate(-45deg); 。 /# 逆 时 针 旋 转 45” */ 
transform-origin: 0 100%; ”* 以 右上 角 为 原点 进行 旋转 */ 
} 
</style> 


<div 1d="shape"></div> 





图 12.27 设计 萎 形 


【示例 2】 设计 平 行 四 边 形 。 制作 平行 四 边 形 的 方法 : 使 用 transform 属性 让 长 方形 倾斜 一 个 角度 。 
代码 如 下 ， 效 果 如 图 12.28 所 示 。 


<style type="text/css"> 

#shape { 
width: 200px; height: 120px:; 
background: #1eff00; 
margin: 60px auto; 
transform: skew(30deg); 
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12.28 设计 平行 四 边 形 


【示例 3】 设 计 星 形 。 星 形 的 HTML 结构 也 是 一 个 <div id="star"> 标 签 , 星 形 的 实现 方法 比较 复杂 ， 
主要 是 使 用 transform 属性 来 旋转 不 同 的 边 ,借助 :before 和 :after 伪 对 象 完 成 。 样 式 代码 如 下 ， 效果 如 
12.29 所 示 。 





” 
’ 
La 
- 
- 
La 
La 
- 
pp 
Li 
- 
Ep 
| 
Pd 
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12.29 ”设计 星 形 


| 

| 

| 

| 

| 

| 

| 

| 

【示例 4】 设 计 心 形 。 心 形 的 制作 比较 复杂 ， 可 以 使 用 伪 对 象 ， 分 别 将 伪 对 象 旋转 不 同 的 角度 ， 
并 修改 transform-origin 属性 来 设计 对 象 的 旋转 中 心 点 。 示 例 样式 代码 如 下 ， 效 果 如 图 12.30 所 示 。 : 
| 
| 
| 
| 
| 
| 
| 
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% 


background: red; 

left: 70px: top: 0; 
border-radius: SOpx S0px 0 0; 
transform: rotate(-45deg); 
transform-origin: 0 100%; 


#heart:after { 
left: 0: 
transform: rotate(45deg); 
transform-origin: 100% 100%; 


} 
</style> 


<div 1d="heart"></div> 


XxX 


区 让 中- 全 hpi//ocalho.. - Bo 





12.30 ”设计 心 形 
窑 提示 : 配合 使 用 变形 函数 和 伪 对 象 选 择 器 ， 用 户 还 可 以 设计 更 多 的 复杂 图 形 。 
12.4.2 ”设计 冒 泡 背景 按钮 


本 例 应 用 CSS3 过 渡 动 画 特效 ， 为 按钮 背景 图 像 定义 动态 移动 效果 ， 设 计 当 鼠标 指针 经 过 时 ， 按 
钮 背景 绚丽 多 彩 ， 不 断 产生 冒 泡 的 动画 效果 ， 如 图 12.31 所 示 。 





12.31 设计 背景 冒 泡 效 果 的 按钮 样式 
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【操作 步骤 】 

第 1 步 ， 设 计 按 钮 基本 样式 ， 代 码 如 下 。 

-button { 
font:1Spx Callbrl Arial, sans-serif: 
席 半 透明 的 文本 阴影 */ 
text-shadow:1px lpx 0 rgba(255,255,255,0.4); 
虑 重 写 默认 下 划 线 的 链接 样式 */ 
text-decoration:none !Important: 
white-space:nowrap: 话 禁 止 文本 换行 显示 */ 
display:inline-block: /# 行 内 块 显 示 拟 
vertical-align:baseline; /# 垂 直 基 线 对 齐 #/ 
position:relative: 率 相 对 定位 */ 
cursor:pointer; 此 鼠标 指针 为 手 形 */ 
padding:10px 20px; 放 增 加 按钮 内 空间 */ 


background-repeat:no-repeat; 

刻下 面 两 个 规则 是 回 退 ， 以 防 浏览 器 不 支持 多 重 背 景 */ 
background-position:bottom left: 
background-1mage:url(images/button bg.png')); 

人/# 多 重 背 景 。 背 景 图 像 在 颜色 类 中 单独 定义 类 
background-position:bottom left, top right, 0 0, 0 0: 
background-clip:border-box: 

/# 设计 圆 角 */ 

border-radius:8px; 

上 # 添加 1 像素 的 高 完 效 果 */ 

box-shadow:0 0 1px #fff inset; 

谍 设计 CSS 过 渡 动 画 ， 动 画 属性 为 背景 图 像 的 位 置 */ 
transition:background-position 1s: 





} 
第 2 步 ， 设 计 鼠 标 指针 经 过 时 的 动态 样式 ， 代 码 如 下 。 


.button:hover { 
background-position: top left: /# 回 退 技术 ， 兼 容 浏 览 器 不 文 持 多 背景 */ 
background-position: top left, bottom right, 0 0, 0 0; 

} 


第 3 步 ， 设 计 激 活 时 按钮 下 沉 的 样式 ， 代 码 如 下 。 


.button:active { bottom: -1px: } 
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第 4 步 ， 设 计 按 钮 大 小 号 类 样式 ， 代 码 如 下 。 


-button.button blg { font-slze: 30px; } 
-button.button medium { font-slze: 1 8px; } 
-button.button small { font-size: 13px; } 


第 5 步 ， 设 计 圆 角 按钮 类 样式 ， 代 码 如 下 。 


-button.button rounded { border-radius: 4em;} 


第 6 步 ， 设 计 按钮 主题 类 样式 ， 代 码 如 下 。 


-button blue.button { 
color: #0f4b6d li1mportant; 
border: 1px solid #84acc3 limportant: 
谍 回 退 背景 色 颜 色 */ 
background-color: #48b5f2:; 
上 # 定义 多 背景 图 */ 
background-1mage: url(images/button bg.png'), url(i1mages/button bg.png'), radial-gradient( center bottom, 
circle, rgba(89,208,244.,1) 0, rgba(89,208,244.0) 100px), linear-gradient(#4fbbf7, #3faeeb); 
} 
.button_blue.button:hover {/* 定义 鼠标 指针 经 过 时 多 背景 图 的 样式 */ 
background-color: #63¢c7fe: 
background-1mage: url(1mages/button bg.png'"), url(i1mages/button bg.png), radial-gradient( center bottom, 
circle, rgba(109,217.,250,1) 0, rgba(109,217,250.,0) 100px), linear-gradient(#63¢c7fe, 的 8bef7): 
} 


12.4.3 设计 动画 效果 菜单 


本 例 利用 CSS3 过 渡 动 画 设 计 一 个 界面 切换 的 导航 菜单 ， 当 鼠标 指针 经 过 菜单 项 时 , 会 以 动画 形 
式 从 中 文 界 面 缓慢 翻转 到 英文 界面 ， 或 者 从 英文 界面 翻转 到 中 文 界面 ， 效 果 如 图 12.32 所 示 。 


Es Fry 中、 沁 http://localhost:8080/mysite/index}t ~ 品 避 二 localhost 








图 12.32 设计 动画 翻转 菜单 样式 


【操作 步骤 】 
第 1 步 ， 设 计 某 单 结 构 。 在 每 个 全 单项 (<div class="menul">) 中 包含 两 个 子 标签 : <div class= 
"one"> 和 <div class="two">， 设 计 菜 单项 仅 显 示 一 个 子 标签 ， 当 鼠标 指针 经 过 时 ， 翻 转 显 示 男 一 个 子 
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标签 ， 代 码 如 下 。 





第 2 步 ， 设 计 菜 单项 样式 : 固定 大 小 、 相 对 定位 ， 茶 止 内 容 洲 出 ， 同 左 浮动 ， 定 义 并 列 显示 ， 
代码 如 下 。 


第 3 步 ， 设 计 每 个 菜单 项 中 子 标签 <div class="one"> 和 <div class="two"> 的 样式 。 定 义 它 们 与 菜 
单项 相同 大 小 ， 这 样 就 只 能 够 显示 一 个 子 标签 ， 为 了 方 使 控制， 定义 它们 为 绝对 定位 ， 包 含 文本 水 ， 
平 居 中 和 垂直 居中 ， 最 后 定义 过 渡 动 画 时 间 为 0.3s， 加 速 到 减速 显示 ， 代 码 如 下 。 








第 4 步 ， 设 计 过 渡 动 画 样式 。 本 例 设 计 过 渡 演 示 属 性 为 left、top 和 bottom， 当 鼠标 指针 经 过 时 ， 
改变 定位 属性 的 值 ， 实 现 菜 单项 动态 翻转 效果 ， 代 人 码 如 下 。 


AN 
、 
™ 
™ 
™ 
、 
AN 
a 
~ 
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.menul .one { 
top: 0; left: 0: 
z-index: ] : 
background: #63C; color: #FFF: 


} 
.menul :hover .one { top: -30px; left: 0;} 





.menul .two { 
bottom: -30px; left: 0; 
z-index: 2: 
background: #f50; color: #FFF:; 


} 
.menul:hover .two { bottom: 0px: left: 0:} 


12.4.4 设计 照片 特效 


本 例 使 用 CSS3 阴影 、 透 明 效 果 ， 以 及 变换 ， 让 图 片 随意 显示 ， 当 鼠标 指针 移动 到 图 片上 时 ， 会 
自动 放大 并 垂直 摆 放 ， 演 示 效 果 如 图 12.33 所 示 。 





全 sall 个 http://localhost8080/mysite/testhtml ~ 0| Elocalhost 





图 12.33 ”设计 挂图 效果 
主要 代码 如 下 。 


<style type="text/css"> 
ul.polaroids li { display: inline;} 
ul.polaroids a { 
display: inline; float: left: 
margin: 0 0 S0px 60px; padding: 12px; 
text-align: center: 
text-decoration: none; color: #333; 
放 为 图 片 外 框 设计 阴影 效果 */ 
box-shadow: 0 3px 6px rgba(0, 0, 0, .25); 
/# 设 置 过 渡 动 画 : 过 渡 属性 为 transform， 时 长 为 0.15s， 线 性 渐变 */ 
transition: -webkit-transform .15s linear: 
讶 顺 时 针 旋 转 2”*/ 
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transform: rotate(-2deg); 
} 
ul.polaroids img { /* 统 一 图 片 基 本 样式 */ 
display: block: 
height: 100px; 
border: none: 


margin-bottom: 12px;: 


谍 利 用 图 片 的 tittle 属性 ， 添 加 图 片 显 示 标 题 */ 
ul.polaroids a:after { content: attr(title):} 


谍 为 偶数 图 片 倾斜 显示 */ 
ul.polaroids li:nth-child(even)a { 

transform: rotate(10deg): /# 逆 时 针 旋 转 10”*/ 
} 
ul.polaroids li a:hover { 

/# 放 大 对 象 1.25 倍 */ 

transform: scale(1.25): 

box-shadow: 0 3px 6px rgba(0, 0, 0, .5); 
} 
</style> 


<ul class="polarolds"> 
<]i> <a hre 伍 "1" title=" 相 识 "> <img src="images/1.jpg" alt=" 相 识 "> </a> < 由 > 
<li> <a hre 人 "2" title=" 相 知 "> <img src="images/2.jpg" alt=" 相 知 "> </a> < 由 > 
<]i> <a hre 全 "3" title=" 上 自信 心 <img src="images/3.jpg" alt=" 自 信 "> </a> </li> 
</ul> 


12.4.5 ”设计 立体 盒子 
【示例 1】 本 示例 使 用 2D 多 重 变 换 制作 一 个 正方 体 。 代 码 如 下 ， 演 示 效 果 如 图 12.34 所 示 。 


<style type="text/css"> 
body {padding:20px 0 0 100px:} 
.Side { 
height: 100px: width: 100px: 
position: absolute: 
font-size: 20px: font-welght: bold; line-height: 100px: text-align: center; color: #fff: 
text-shadow: 0 -1px 0 rgba(0,0,0,0.2); 


text-transform: Uppercase; 
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.top {f/* 顶 面 #/ 
background: red; 
transform: rotate(-45deg) skew(1Sdeg, 15deg); 
} 
.left {/* 左 侧面 */ 
background: blue: 
transform: rotate(l1Sdeg) skew(1Sdeg, 1Sdeg) translate(-50%, 100%); 
} 
Tight {/* 右 侧面 */ 
background: green; 
transform: rotate(-l Sdeg) skew(-l15deg, -1Sdeg) translate(50%, 100%); 
} 
</style> 


<div class="side top"> 顶 面 </div> 
<div class="side left"> 左 侧面 </div> 
<div class="side right"> 右 侧面 </div> 


各 > [+)- @ http;//localho... ~ @ © | @ localhost 








图 12.34 设计 2D 变换 盒子 
【示例 2】 本 示例 使 用 3D 多 重 变 换 制作 一 个 正方 体 。 代 码 如 下 ， 演 示 效 果 如 图 12.35 所 示 。 


<style type="text/css"> 

.stage {/* 定 义 男 布 样式 */ 
width: 300px; height: 300px; margin: 100px auto; position: relative; 
perspective: 300px; 

} 

/# 定 义 盒子 包含 框 样式 */ 

.container { transform-style: preserve-3d:} 

/# 定 义 盒子 六 面 基 本 样式 */ 

.side { 
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二 +) | httpi//localhosts = @ © | E localhost 








12.35 设计 3D 盒子 


12.4.6 ”旋转 盒子 


本 节 示 例 以 12.4.5 节 示 例 为 基础 ， 使 用 animation 属性 设计 盒子 旋转 显示 。 
【示例 1】 本 例 使 用 2D 制作 一 个 正方 体 ， 然后 设计 它 在 鼠标 指针 经 过 时 沿 y 轴 旋 转 , 演示 效果 


如 图 12.36 所 示 。 





和 > 中 -| 惟 http://localho... ~ 0 | Elocalhost 








12.36 ”设计 旋转 的 3D 盒子 
第 1 步 ， 复 制 上 节 示 例 index1.html。 在 HTML 结构 中 为 盒子 添加 两 层 包 含 框 ， 代 码 如 下 。 


<div class="stage sl1"> 
<div class="container"> 
<div class="side top">Top</div> 
<div class="side left">Left</div> 
<div class="side right">Right</div> 
</div> 
</div> 


第 2 步 ， 在 内 部 样式 表 中 定义 关键 帧 ， 代 码 如 下 。 
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/# 定 义 关 键 帧 动画 */ 
@keyframes spin{/* 标 准 模式 */ 
0% {transform:rotateY (0deg)} 
100% {transform:rotateY (360deg)} 
} 


第 3 步 ， 设 计 3D 变换 的 透视 距离 和 变换 类 型 ， 即 启动 3D 变换 ， 代 码 如 下 。 





谍 定 义 盒子 所 在 画布 框 的 样式 */ 
.Stage { perspective: 1200px:} 

/# 定 义 盒子 包含 框 样式 */ 

.container { transform-style: preserve-3d;} 


第 4 步 ， 定 义 动画 触发 方式 ， 代 码 如 下 。 


/# 定 义 鼠 标 指 针 经 过 盒子 时 ， 和 触发 线性 变形 动画 ， 动 画 时 长 5s， 持 续 播 放 */ 
.container:hover{ animation:spin $s linear Infinite:} 


本 例 完整 代码 请 参考 本 书 源 代码 。 
【示例 2】 本 例 使 用 3D 制作 一 个 正方 体 ， 然 后 设计 它 在 鼠标 指针 经 过 时 沿 y 轴 旋 转 ， 演 示 效 果 
如 图 12.37 所 示 。 


DD localhost:8080/mysite, x 


[€ | © localhost:8080/mysite/index2.html 





12.37 设计 旋转 的 3D 盒子 
第 1 步 ， 在 内 部 样式 表 中 定义 关键 帧 ， 代 码 如 下 。 
/# 定 义 关 键 帧 动画 */ 
(keyframes spin { 
0% {transform:rotateY (0deg)} 


100% {transform:rotateY(360deg)} 
} 


第 2 步 ， 设 计 3D 变换 的 透视 距离 和 变换 类 型 ， 即 启动 3D 变换 ， 代 码 如 下 。 
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庶 定 义 男 布 样式 */ 
.stage { perspective: 300px; } 


/定义 盒子 包含 框 样式 */ 
| .container { transform-style: preserve-3d: } 


第 3 步 ， 定 义 动画 触发 方式 ， 代 码 如 下 。 


证 定义 鼠标 指针 经 过 时 触发 盒子 旋转 动画 */ 
.container:hover { animation: spin $s linear infinite;} 


本 例 完整 代码 请 参考 本 书 源 代码 。 


12.4.7 设计 翻转 广告 


本 例 设 计 当 鼠 标 指针 移动 到 产品 图 片上 时 ,产品 信息 翻转 滑 出 的 效果 ， 如 图 12.38 所 示 。 在 默认 
状态 下 只 显示 产品 图 片 ， 而 产品 信息 隐藏 不 可 见 。 当 用 户 将 鼠标 指针 移动 到 产品 图 像 上 时 ， 产 品 图 
像 慢 慢 往 上 旋转 使 产品 信息 展示 出 来 ， 而 产品 图 像 慢 慢 隐藏 起 来 ， 看 起 来 就 像 是 一 个 旋转 的 盒子 。 








| | localhost/mysite/testht: x | | localhost/mysite/test.ht, x 
~ 3》 @ [localhost/mysite/test.html se/ VY 三 ~- 3 CC Dlocalhost/mysite/test.html yr/ VY = 


过 PRIVEREC: 


高 级 会 员 特权 专场 加 
| nl 满 减 白 上 折 两 大 特权 任 你 先 © 会 员 特权 


9 最 高 直 降 全 (元 


(oN 1 


局 


严 
器 





默认 状态 翻转 状态 
图 12.38 设计 3D 翻转 广告 牌 
主要 代码 如 下 。 
<style type="text/css"> 
此 定义 包含 框 样式 */ 
.wrapper { 


display: nline-block:; width: 345px; height: 186px; margin: lem auto; cursor: pointer; position: relative; 
/# 定 义 3D 元 素 距 视图 的 距离 */ 

perspective: 4000pxX: 
} 
/# 定 义 旋 转 元 素 样 式 : 3D 动画 ， 动 画 时 长 0.6 秒 */ 


.ltem { 
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height: 186px; 
transform-style: preserve-3d; 


transition: transform .6s: 


} 
* 定 义 鼠 标 指针 经 过 时 触发 动画 ， 并 定义 旋转 形式 */ 
.ltem:hover { 
transform: translateZ(-S0px) rotateX(95deg); 
} 
.ltem:hover 1mg {box-shadow: none: border-radius: 1SpX:} 
.ltem:hover .Information { box-shadow: Opx 3px 8px rgba(0,0,0,0.3); border-radius: 1 Spx;} 
上 # 定 义 广 告 图 的 动画 形式 和 样式 */ 
.ltem>lmg { 
display: block:; position: absolute: top: 0; border-radius: 3px;box-shadow: 0px 3px 8px rgba(0,0,0,0.3); 
transform: translateZ(SOpx); 
transition: all .6s; 
} 
席 定 义 广告 文字 的 动画 形式 和 样式 */ 
.ltem .information { 
position: absolute; top: 0:; height: 186px: width: 34Spx: border-radius: 1 Spx;: 
transform: rotateX(-90deg) translateZ(S50px); 
transition: all .6s: 
} 
</style> 


<div class="wrapper"> 
<div class="1item"> 


<lmg src="i1mages/1.png" /> 


<span class="1information"><img src="1mages/2.png" /></span> 
</div> 


</div> 


12.4.8 设计 跑步 效果 


本 例 设计 一 个 跑步 动画 效果 , 主要 使 用 CSS3 帧 动画 控制 一 张 序 列 人 物 跑 步 的 背景 图 像 ， 在 页 面 
固定 “镜头 ”中 快速 切换 实现 动画 效果 ， 如 图 12.39 所 示 。 

【操作 步骤 】 

第 1 步 ， 设 计 舞 台 场 景 结 构 。 新 建 HIML 文档 ， 保 存 为 mdexl.html。 输 入 以 下 代码 。 


<div class="charector-wrap " 1d="]s_wrap"> 
<div class="charector"></div> 


</div> 
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G | © localhost:8080/mysite/index1.html 





图 12.39 设计 跑步 的 小 人 
第 2 步 ， 设 计 舞 台 基 本 样式 ， 代 码 如 下 。 其 中 导入 的 小 人 图 片 是 一 个 序列 跑步 人 物 ， 如 图 12.40 所 示 。 


.charector-wrap { 
position: relative; 
width: 180px: 
height: 300px; 
left: 50%: 
margin-left: -90px; 

} 

.charector{ 
position: absolute:; 
width: 180px: 
height:300px:; 
background: url(img/charector.png) 0 0 no-repeat': 





图 12.40 小 人 序列 集合 


本 例 主要 设计 任务 就 是 让 序列 小 人 仪 显示 一 个 , 然后 通过 CSS3 动画 , 让 他 们 快速 内 现在 指定 的 
限定 框 中 。 
第 3 步 ， 设 计 动画 关键 帧 ， 代 码 如 下 。 


(@keyframes person-normal{/* 跑 步 动 画 名 称 */ 
0% {background-position: 0 0;} 
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28.6% {background-position: -360px 0:} 
42.9% {background-position: -540px 0;} 
$57.2% {background-position: -720px 0:} 
71.5% {background-position: -900px 0;} 
85.8% {background-position: -1080px 0;} 
100% {background-position: 0 0;} 


14.3% {background-position: -180px 0;} 


人 





} 
第 4 步 ， 设 置 动 画 属性 ， 代 码 如 下 。 


.charector{ 
animation-iteration-count: infinite: /# 动画 无 限 播放 */ 
animation-timing-function:step-start: 谍 马上 跳 到 动画 每 一 结束 帧 的 状态 */ 
} 


第 $ 步 ， 尼 动 动画 并 设置 动画 频率 ， 代 码 如 下 。 


庆 启动 动画 并 控制 跑步 动作 频率 */ 
.charector{ 
animation-name: person-normal: 
animation-duration: 800ms: 
} 


12.4.9 ”设计 折 又 面板 


本 例 使 用 CSS3 的 目标 伪 类 :target) 设计 折 有 登 面 板 效 果 ， 没 有 使 用 JavaScript 脚本 ， 使 用 过 渡 
属性 设计 滑动 效果 ， 折 车 动画 效果 如 图 12.41 所 示 。 | 视频 


a) 中- Ehttp://localhost/test.html#one * 0|@ localhost 





图 12.41 设计 折 疙 面板 


一 
1 


.437 . 


者 De (ss3+1DN 网 页 样式 与 市 局 从 入 门 到 精通 ( 币 梨 精 编 版) 


主要 代码 如 下 。 
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12.5 在 线 练 习 


练习 CSS3 动画 一 般 设计 方法 ， 培 养 灵活 应 用 交互 式 动态 样式 的 基本 能 力 。 感 兴趣 的 读者 可 以 
扫 码 练习 。 





一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 
4 
a 
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第 章 


使 用 CSS3 设计 响应 陈 页 面 


2017 年 9 月 ，W3C 发 布 了 媒体 查询 ( Media Query Level 4 ) 候选 推荐 标准 规范 ， 它 扩 
展 了 已 经 发 布 的 媒体 查询 的 功能 。 该 规范 用 于 CSS 的 @media 规则 , 可 以 为 文档 设 定 特定 条 
件 的 样式 ， 也 可 用 于 HIML 、JavaScript 等 语言 中 。 

权威 参 者 : http://www.w3.org/TR/css3-mediaqueries/。 


【 学 习 要 点 】 

P| 了 解 CSS3 媒体 类 型 。 

| 正常 使 用 媒体 查询 的 条 件 规则 。 
六 设计 响应 不 同 设备 的 网 页 布局 。 


第 13 章 使 用 CSS3 设计 响应 式 页 面 





13.1 媒体 查询 基础 


媒体 查询 可 以 根据 设备 特性 ， 如 屏幕 宽度 、 高 度 、 设 备 方向 横向 或 纵向 )， 为 设备 定义 独立 的 
Css 样式 表 。 一 个 媒体 查询 由 一 个 可 选 的 媒体 类 型 和 零 个 或 多 个 限制 范围 的 表达 式 组 成 ， 如 宽度 、 
高 度 和 颜色 。 


13.1.1 媒体 类 型 和 媒体 查询 

CSS 2 提出 媒体 类 型 (Media Type) 的 概念 ， 它 允许 为 样式 表 设 置 限制 范围 的 媒体 类 型 。 例 如 ， 
仅 供 打 印 的 样式 表 文 件 、 仅 供 手 机 谊 染 的 样式 表 文 件 、 仅 供电 视 泻 染 的 样式 表 文 件 等 ， 有 具体 说 明 如 
表 13.1 所 示 。 





表 13.1 CSS 媒体 类 型 





类 型 支持 的 浏览 器 说 明 
aural 用 于 语音 和 音乐 合成 器 

braille 用 于 触觉 反馈 设备 

handheld 用 于 小 型 或 手持 设备 

print 所 有 浏览 器 用 于 打印 机 

projection 用 于 投影 图 像 ， 如 幻灯 片 
screen 所 有 浏览 器 用 于 屏幕 显示 器 

tty 用 于 使 用 固定 间距 字符 格 的 设备 ， 如 电 传 打字 机 和 终端 
机 

embossed Opea 用 于 凸 点 字符 (盲文 ) 印 刷 设 备 
speech 用 于 语音 类 型 

all 所 有 浏览 器 用 于 所 有 媒体 设备 类 型 


通过 <HTMIL> 标 签 media 属性 定义 样式 表 的 媒体 类 型 ， 具 体 方法 如 下 。 
包 ”定义 外 部 样式 表 文件 的 媒体 类 型 


<link href—"csss.css" rel="stylesheet" type="text/css" media="handheld" /> 
四 ”定义 内 部 样式 表 文 件 的 媒体 类 型 


<style type="text/css" media="screen"> 


</style> 


CSS3 在 媒体 类 型 基础 上 ， 提 出 了 Media Queries (媒体 查询 ) 的 概念 。 媒 体 查 询 比 CSS2 的 媒体 
类 型 功能 更 强大 、 更 完善 。 两 者 主要 区 别 是 : 媒体 查询 是 一 个 值 或 一 个 范围 的 值 ， 而 媒体 类 型 仅仅 
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是 设备 的 匹配 。 媒 体 类 型 可 以 帮助 用 户 获取 以 下 数据 。 
回 ”浏览 器 窗口 的 宽 和 高 
会 人 A 时 回 ”设备 的 宽 和 高 
二 | 回 ”设备 的 手持 方向 〈 横 向 还 是 紧 向 ) 
加 ”分辨 率 
例如 下 面 这 条 导入 外 部 样式 表 的 语句 : 


<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 





在 media 属性 中 设置 媒体 查询 的 条 件 (max-width: 600px): 当 屏 幕 宽度 小 于 或 等 于 600px 时 ， 则 
调用 small.css 样式 表 来 泻 染 页 面 。 


13.1.2 ”使 用 @media 

CSS3 使 用 @media 规则 定义 媒体 查询 ， 简 化 语法 格式 如 下 。 

(media [only | not]? <media_ type> [and <expression>|* | <expression> [and <expression>|*{ 

/# CSS 样式 列表 */ 

} 

参数 简单 说 明 如 下 。 

四 ”<media_ type>: 指定 媒体 类 型 ， 具 体 说 明 参 考 表 13.1。 

名 ”<expression>: 指定 媒体 特性 ， 放 在 一 对 圆 括 号 中 ， 如 (min-width:400px)。 

名 逻辑 运算 符 ， 如 and (逻辑 与 )、not (逻辑 否 )、only (兼容 设备 ) 等 。 

媒体 特性 包括 13 种 ， 接 受 单个 的 逻辑 表达 式 作为 值 或 者 没有 值 。 大 部 分 特性 接受 min 或 max 
的 前 经， 用 来 表示 大 于 等 于 或 者 小 于 等 于 的 迎 辑 ， 以 此 避免 使 用 大 于 号 (>) 和 小 于 号 (<) 字符 。 

下 面 是 各 种 媒体 特性 的 简单 说 明 。 

1. 颜色 (color ) 

指定 输出 设备 每 个 像素 单元 的 比特 值 ， 接 受 min/max 前 绥 。 例 如 ， 每 个 颜色 单元 至 少 有 4 个 比 
特 的 设备 应 用 样式 表 ， 代 码 如 下 。 

(media all and (min-color: 4) { ...} 


2. 颜色 索引 ( color-index ) 


指定 输出 设备 颜色 查询 表 中 的 条 目 数 量 ， 接 受 min/max 前 级 。 例 如 ， 向 所 有 使 用 索引 颜色 的 设 
备 应 用 样式 表 ， 代 码 如 下 。 


(Qmedia all and (color-index) { ...} 


3. 宽 高 比 (aspect-ratio ) 


指定 输出 设备 目标 显示 区 域 的 宽 高 比 。 取 值 包 含 两 个 以 “/” 分 隔 的 正 整数 ， 代 表 水 平 像素 数 与 
竺 直 像素 数 的 比例 ， 接 受 min/max 前 级 。 例 如 ， 下 面 为 显示 区 域 宽 高 比 至 少 为 1 :1 的 设备 选择 了 一 
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个 特殊 的 样式 表 ， 代 码 如 下 。 


(media screen and (min-aspect-ratio: 1/1) { ...} 





4. 设备 宽 高 比 ( device-aspect-ratio ) 


指定 输出 设备 的 宽 高 比 ， 接 受 min/max 前 级 。 例 如 ， 下 面 为 宽屏 设备 选择 了 一 个 特殊 的 样式 表 ， 
代码 如 下 。 





(media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ...} 
5. 设备 高 度 ( device-height ) 


指定 输出 设备 的 高 度 ， 接 受 min/max 前 级 。 例 如 ， 在 最 大 宽度 800px 的 屏幕 上 应 用 样式 表 ， 代 
码 如 下 。 


<link rel="stylesheet" media="screen and (max-device-width: 799px)" /> 
6. 设备 宽度 ( device-width ) 

指定 输出 设备 的 宽度 ， 接 受 min/max 前 级 。 

7. 网 格 ( grid ) 


判断 输出 设备 是 网 格 设备 还 是 位 图 设备 。 如 果 设 备 是 基于 网 格 的 (如 电 传 打字 机 )， 该 值 为 1， 
否则 为 0。 例 如， 同一 个 15 字符 宽度 或 更 罕 的 手持 设备 应 用 样式 ， 代 码 如 下 。 


(Qmedia handheld and (grid) and (max-width: 1Sem) { ...} 

8. 高 度 (height ) 

指定 输出 设备 泻 染 区 域 的 高 度 ， 接 受 min/max 前 级 。 
9. 黑白 (Imonochrome ) 


指定 一 个 黑白 设备 每 个 像素 的 比特 数 ， 接 受 min/max 前 级 。 例 如 ， 向 所 有 黑白 设备 应 用 样式 表 ， 
代码 如 下 。 


(media all and (monochrome) { ...} 


10. 方向 (orientation ) 


指定 设备 处 于 横 屏 (宽度 大 于 高 度 ) 模式 还 是 竖 屏 (高 度 大 于 宽度 ) 模式 。 取 值 包括 landscape 
( 横 屏 ) 和 portrait〈 竖 屏 )。 例 如 ， 回 竖 屏 设备 应 用 样式 表 ， 代 码 如 下 。 


(media all and (orientation: portrait) { ... } 
11. 分 辨 率 (ITesolution ) 


指定 输出 设备 的 分 辨 率 ， 接 受 min/max 前 级 。 例 如 ， 为 每 英寸 至 多 300 点 的 打印 机 应 用 样式 ， 
代码 如 下 。 
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(media print and (min-resolution: 300dpi) { ...} 
12. 扫描 ( scan ) 


指定 电视 输出 设备 的 扫描 过 程 ， 取 值 包括 progressive 和 interlace (交错 )。 例 如 ， 辣 以 顺序 方式 
gx 扫描 的 电视 机 上 应 用 样式 表 ， 代 码 如 下 。 





(media tv and (scan: progressive) { ...} 
13. 宽度 (width ) 


指定 输出 设备 泻 染 区 域 的 宽度 ， 接 受 min/max 前 绥 。 例 如 ， 回 宽度 在 500 一 800px 的 屏 幕 应 用 样 
式 表 ， 代 人 码 如 下 。 


(media screen and (min-width: S00px) and (max-width: 800px) { ... } 


在 CSS 样式 的 开头 必须 定义 @media 关键 字 ， 然 后 指定 媒体 类 型 ， 再 指定 媒体 特性 。 媒 体 特性 的 
格式 与 样式 的 格式 相似 ， 分 为 两 部 分 ， 由 冒号 分 隔 ， 冒 号 前 指定 媒体 特性 ， 冒 号 后 指定 该 特性 的 值 。 
例如 ， 下 面 语句 指定 了 当 设 备 显 示 屏 幕 宽度 小 于 640px 时 所 使 用 的 样式 。 


(media screen and (max-width: 639px) { 
诺 样 式 代码 */ 
} 


可 以 使 用 多 个 媒体 查询 将 同一 个 样式 应 用 于 不 同 的 媒体 类 型 和 媒体 特性 中 ， 媒 体 查 询 之 间 用 去 
号 分 隅 ， 类 似 于 选择 器 分 组 ， 代 码 如 下 。 


(@media handheld and (min-width:360px),screen and (min-width:480px) { 
诺 样 式 代 码 */ 
} 


可 以 在 表达 式 中 加 上 not、only 和 and 等 逻辑 运算 符 ， 代 码 如 下 。 


/下 面 样式 代码 将 被 使 用 在 除 便 携 设备 之 外 的 其 他 设备 或 非 彩 色 便 携 设 备 中 
(media not handheld and (color) { 
诺 样 式 代码 */ 
} 
/下 面 样式 代码 将 被 使 用 在 所 有 非 彩色 设备 中 
(@media all and (not color) { 
谍 样 式 代 码 */ 
} 


only 运算 符 能 够 让 那些 不 支持 媒体 查询 但 是 支持 媒体 类 型 的 设备 忽略 表达 式 中 的 样式 , 代码 如 下 。 


@media only screen and (color) { 
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库 样 式 代码 */ 
} 


a 
对 于 支持 媒体 查询 的 设备 来 说 ， 能 够 正确 地 读 取 其 中 的 样式 ， 仿 佛 only 运算 符 不 存在 一 样 ， 对 
于 不 支持 媒体 查询 ， 但 支持 媒体 类 型 的 设备 〈 如 下 8) 来 说 ， 可 以 识别 @media screen 关键 字 ， 但 是 
由 于 先 读 取 的 是 only 运算 符 ， 而 不 是 screen 关键 字 ， 将 忽略 这 个 样式 。 





会 提示 : 媒体 查询 也 可 以 用 在 @import 规则 和 <link> 标 签 中 。 例 如 : 
(Qimport url(example.css) screen and (width:800px); 


/下面 代码 定义 了 如 果 页 面 通过 屏幕 呈现 ， 且 屏幕 宽度 不 超过 480px， 则 加 载 shetland.css 样式 表 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href—="shetland.css" /> 


13.1.3 ”应 用 @media 


【示例 1】and 运算 符 用 于 符号 两 边 规则 均 满 足 条 件 的 匹配 ， 代 码 如 下 。 
(Qmedia screen and (max-width : 600px) { 


/* 匹 配 宽度 小 于 等 于 600px 的 屏幕 设备 */ 
} 


【示例 2】not 运算 符 用 于 取 非 ， 所 有 不 满足 该 规则 的 均 匹 配 ， 代 码 如 下 。 


@media not print { 
谍 匹 配 除 了 打印 机 以 外 的 所 有 设备 */ 


< 向 注意 : not 仅 应 用 于 整个 媒体 查询 ， 代 码 如 下 。 
media not all and (max-width : S00px) {} 
话 等 价 于 */ 
@media not (all and (max-width : 500px)) 他 
/而 不 是 类 
@media (not all and (max-width : S00px) 他 


在 去 号 媒体 得 询 列 表 中 ，not 仅 会 否定 它 所 在 的 媒体 查询 ， 而 不 影响 其 他 的 媒体 得 询 。 
如 果 在 复杂 的 条 件 中 使 用 not 运算 符 ， 要 显 式 添 加 小 括号 ， 避 免 野 义 。 
【示例 3】 喜 号 〈,) 相当 于 or 运算 符 ， 用 于 两 边 有 一 条 满足 则 匹配 ， 代 码 如 下 。 
(media screen , (min-width : 800px) { 

谍 匹 配 屏幕 或 者 宽度 大 于 等 于 800px 的 设备 */ 
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【示例 4】 在 媒体 类 型 中 ，all 是 默认 值 ， 匹 配 所 有 设备 ， 代 码 如 下 。 





: @media all { 
/# 可 以 过 滤 不 支持 media 的 浏览 器 */ 
} 
常用 的 媒体 类 型 还 有 screen 匹配 屏幕 显示 器 、Pprint 匹配 打印 输出 等 ， 更 多 媒体 类 型 可 以 参考 
表 本 到 


【示例 $】 使 用 媒体 查询 时 ， 必 须要 加 括号 ， 一 个 括号 就 是 一 个 查询 ， 代 码 如 下 。 


(Qmedia (max-width : 600px) { 
此 匹配 界面 宽度 小 于 等 于 600px 的 设备 */ 
} 
@media (min-width : 400px) { 
刻 匹 配 界面 党 度 大 于 等 于 400px 的 设备 */ 
} 
(media (max-device-width : 800px) { 
刻 匹 配 设备 (不 是 界面 ) 宽 度 小 于 等 于 800px 的 设备 */ 
} 
(media (min-device-width : 600px) { 
此 匹配 设备 (不 是 界面 ) 宽 度 大 于 等 于 600px 的 设备 */ 


窑 提示 : 在 设计 手机 网 页 时 ， 应 该 使 用 device-width/device-height， 因 为 手机 浏览 器 默认 会 对 页 面 
进行 一 些 缩放 ， 如 果 按 照 设备 宽 高 来 进行 匹配 ， 会 更 接近 预期 的 效果 。 


【示例 6】 媒 体 查 询 允 许 相互 内 套 ， 这 样 可 以 优化 代码 ， 避 免 元 余 ， 代 码 如 下 。 


@media not print { 
卡通 用 样式 */ 
(media (max-width:600px) { 
族 此 条 匹配 宽度 小 于 等 于 600px 的 非 打印 机 设备 */ 
} 
media (min-width:600px) { 
证 此 条 匹配 宽度 大 于 等 于 600px 的 非 打 印 机 设备 */ 
} 
} 


【示例 7】 在 设计 啊 应 式 页 面 时 ， 用 户 应 该 根据 实际 需要 ， 先 确定 目 适应 分 辨 率 的 国 值 ， 也 就 是 
页 面 啊 应 的 临界 点 ， 代 码 如 下 。 
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因此 ， 当 我 们 使 用 min-width 媒体 特性 时 ， 应 该 按 从 小 到 大 的 顺序 设计 各 个 阔 值 。 同 理 ， 如 果 使 
用 max-width， 就 应 该 按 从 大 到 小 的 顺序 设计 各 个 阔 值 ， 代 码 如 下 。 


【示例 8】 用 户 可 以 创建 多 个 样式 表 ， 以 适应 不 同 媒体 类 型 的 宽度 范围 。 当 然 ， 更 有 效率 的 方法 
是 将 多 个 媒体 查询 整合 在 一 个 样式 表 文件 中 ， 这 样 可 以 减少 请 求 的 数量 ， 代 码 如 下 。 : 
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诬 样 式 列表 */ 
| } 
: 【示例 9】 如 果 从 资源 的 组 织 和 维护 的 角度 考虑 ， 可 以 选择 使 用 多 个 样式 表 的 方式 来 实现 媒体 查 
询 ， 这 样 做 更 高 效 ， 代 码 如 下 。 
<link rel="stylesheet" media="screen and (max-width: 600px)" href—="small.css" /> 


<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" /> 
<link rel="stylesheet" media="print" href—="print.css" /> 


【示例 10】 使 用 orientation 属性 可 以 判断 设备 屏幕 当前 是 横 屏 ( 值 为 landscape) 还 是 竖 屏 〈 值 为 
portrait)， 代 码 如 下 。 


(media screen and (orientation: landscape) { 


-]PadLandscape { 
width: 30%: 
float: right: 

} 


} 
(media screen and (orientation: portrait) { 


.1PadPortrait {clear: both:} 
} 


不 过 orientation 属性 只 在 iPad 上 有 效 ， 对 于 其 他 可 转 屏 的 设备 (如 iPhone)， 可 以 使 用 
min-device-width 和 max-device-width 来 变通 实现 。 

【扩展 】 

媒体 查询 仅 是 一 种 纯 CSS 方式 实现 啊 应 式 Web 设计 的 方法 ， 用 户 还 可 以 使 用 JavaScript 库 来 实 
现 同样 的 设计 。 例 如 ， 下 载 css3-mediaqueries.js (http://code.google.com/p/css3-mediaqueries-]js/)， 然 
后 在 页 面 中 调用 。 对 于 老式 浏览 器 (如 正 6、 正 7、 正 8) 可 以 考虑 使 用 css3-mediaqueries.js 进行 兼 
容 ， 代 码 如 下 。 

<!-0ftlit 正 9|> 


<script src=”http://css3-mediaqueries-]s.googlecode.com/svn/trunk/css3-mediaquerlies.]s”></script> 
<![endif|—> 


【示例 11】 下 面 代码 演示 了 如 何 使 用 jQuery 来 检测 浏览 器 宽度 ， 并 为 不 同 的 视 口 调 用 不 同 的 样 
式 表 ， 代 码 如 下 。 


<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/Jquery/1.9.1/Jquery.min.]s"></script> 
<script type="text/Javascript"> 
$(document).ready(function() { 


$(window).bind("resize", reslze Window); 
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function resize Window(e){ 
var newWindowWidth = $(window).width(); 
if(newWindowWidth < 600){ 
$("link[rel=stylesheet]").attr( {href : "mobile.css"}); 





} 
else if(newWindowWidth > 600){ 


$("link[rel=stylesheet]").attr( {href : "style.css"}); 


De 
</script> 


13.2 案例 实战 


本 节 将 通过 几 个 案例 练习 CSS3 媒体 查询 的 网 页 应 用 。 


13.2.1 判断 显示 屏幕 宽度 
本 例 将 演示 如 何 正 确 使 用 @media 规则 判断 当前 视 口 宽度 的 范围 。 示 例 代 码 如 下 。 





<style type="text/css"> 
.Wrapper {/* 定义 测试 条 的 样式 */ 
padding: Spx 10px; margin: 40pX: 
text-align:center: color:#999: 
border: solid 1px #999:; 
} 
.Viewing-area span {/* 默认 情况 下 隐藏 提示 文本 信息 */ 
color: #666; 
display: none: 
} 
/# 应 用 于 移动 设备 ， 且 设备 最 大 宽度 为 480 像素 */ 
media screen and (max-device-width: 480px) { 
.a { background: 大 cc:} 
} 
上 # 显示 屏幕 宽度 小 于 等 于 600 像素 */ 
(media screen and (max-width: 600px) { 
bi 
background: red; color:#fff: 
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border: solid 1px #000; 


} 
span.lt600 { display: inline-block: } 


/#* 显示 屏幕 宽度 介 于 600 像素 到 900 像素 之 间 */ 
(QQmedia screen and (min-width: 600px) and (max-width: 900px) { 
CC 
background: red; color:#fff: 
border: solid 1px #000; 
} 
span.bt600-900 { display: Inline-block: } 
} 
上 # 显示 屏幕 宽度 大 于 等 于 900 像素 */ 
(media screen and (min-width: 900px) { 
dt 
background: red; color:#fff: 
border: solid 1px #000; 


} 

span.gt900 { display: inline-block: } 
} 
</style> 


<div class="wrapper a"> 设 备 最 大 宽度 为 480 像素 。</div> 
<div class="wrapper b"> 显 示 屏 幕 宽度 小 于 等 于 600 像素 </div> 
<div class="wrapper c"> 显 示 屏 幕 宽 度 介 于 600 像素 到 900 像素 之 间 </div> 
<div class="wrapper d"> 显 示 屏 幕 宽度 大 于 等 于 900 像素 </div> 
<p class="viewing-area"> 
<strong> 当 前 显示 屏幕 宽度 : </strong> 
<span class="lt600"> 小 于 等 于 600px</span> 
<span class="bt600-900"> 介 于 600px - 900px 之 间 </span> 
<span class="gt900"> 大 于 等 于 900px</span> 
</p> 


示例 设计 当 显 示 屏 人 幕 宽度 小 于 等 于 600 像素 时 ， 高 完 显 示 <div class="wrapper b"> 测 试 条 ， 并 在 
底部 显示 提示 信息 : 小 于 等 于 600px; 当 显 示 屏 和 磊 宽 度 介 于 600 像素 和 900 像素 之 间 时 , 高 亮 显 示 <div 
class="wrapper c"> 测 试 条 ， 并 在 底部 显示 提示 信息 : 介 于 600px-900px 之 间 ; 显示 屏幕 宽度 大 于 等 于 
900 像素 时 ， 高 亮 显示 <div class="wrapper d"> 测 试 条 ， 并 在 底部 显示 提示 信息 : 大 于 等 于 900px; 当 
设备 宽度 小 于 等 于 480 像素 时 ， 则 高 亮 显 示 <div class="wrapper a"> 测 试 条 。 演 示 效 果 如 图 13.1 所 示 。 
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-| http:/ /localhost3080/my ~ @ © | @ localhost 











当前 显示 屏幕 宽度 ， 小 于 等 于 600px 当前 显示 屏幕 宽度 ， 介 于 600px-900px 之 间 





显示 屏幕 宽度 小 于 等 于 600 像 素 


一 sl (+)- @ httpV/localhost8030/mysite/testhtml 

















当前 显示 屏幕 宽度 六 于 等 于 900px 





显示 屏幕 宽度 大 于 等 于 900 像 系 
图 13.1 使 用 @media 规则 


13.2.2 ”设计 啊 应 式 版 式 


本 例 在 页 面 中 设计 如 下 3 个 栏目 。 

加 ”<div id="main">: 主要 内 容 栏 目 。 
加 ”<divid="sub">: 次 要 内 容 栏 目 。 
困 ”<div id="sidebar">: 侧 边 栏 栏 目 。 
构建 的 页 面 结 构 如 下 。 


<div 1d="container"> 
<div 1d="wrapper"> 
<div 1d="main"> 
<h1> 水 调 歌 头 。 明 月 几时 有 </h1> 
<h2> 苏 轼 </h2> 


<div 1d="sub"> 
<h2> 宋 词 精 选 </h2> 
<ul> 
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设计 页 面 能 够 自 适应 屏幕 宽度 ， 呈 现 不 同 的 版 式 布局 。 当 显示 屏幕 宽度 在 999 像素 以 上 时 , 让 3 
， 个 栏目 并 列 显示 ， 当 显示 屏幕 宽度 在 639 像素 以 上 、1000 像素 以 下 时 ， 设 计 两 栏目 显示 ， 当 显示 屏 
。 幕 宽度 在 640 像素 以 下 时 ， 让 3 个 栏目 堆 又 显示。 代码 如 下 。 
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#main { width: 420px; float: right; } 
#sub {width: 200px; float: left; } 
#sidebar {width: 100%; float: none; } 
} 
上 # 窗口 宽度 在 640 像素 以 下 */ 
media screen and (max-width: 639px) { 
/# 1 栏 显 示 */ 
#container { width: 100%; } 
#wrapper { width: 100%; float: none; } 
#main {width: 100%; float: none; } 
#sub { width: 100%; float: none; } 
#sidebar { width: 100%; float: none; } 





} 
</style> 


当 显 示 屏 幕 宽度 在 999 像素 以 上 时 ，3 栏 并 列 显 示 ， 预 览 效果 如 图 13.2 所 示 。 


人 人 -|@ http://localhost:8080/mysite/test.html 





水 调 歌 头 " 明 月 几时 有 : 
丙 撒 中 秋 ， 欢 饮 达 旦 ， 大 醇 ， 作 此 简 ， 养 怀 子 由 。 。 柳 永 


明月 几时 有 ? 把 酒 问 青 无 。 不 知 天 上 宫 阅 ， 今 少 是 何 年 。 我 欲 乘 风 归 去 ， 又 恐 琼 
楼 玉宇 ， 高 处 不 胜 寒 。 起 舞 弄 清 影 ， 何 似 在 人 间 ? 


转 朱 阁 ， 低 综 户 ， 腿 无眠 。 不 应 有 恨 ， 何 事 长 向 别 时 圆 ? 人 有 非 欢 离合 ， 月 有 阳 
晴 圆 站 ， 此 事 古 难 全 。 人 和 但 原 人 长 义 ， 千 里 共 婵 娟 。 | 





13.2 显示 屏幕 宽度 在 999 像素 以 上 时 页 面 显示 效果 : 


示 屏幕 宽度 在 640 像素 以 下 时 ，3 个 栏目 从 上 往 下 堆 痘 显示 ， 预 览 效果 如 图 13.4 所 示 。 


© ocahon Emma rr | 
水 调 歌 头 : 明 月 几时 有 ' 


ma 9 » 苏轼 
末 词 精 先 水 调 歌 头 ' 明 月 几时 有 
丙 搬 中 秋 ， 陈 饮 达旦 ， 大 琵 ， 作 此 篇 ， 莱 怀 子 由 。 
。 下 明月 几时 有 ? 把 酒 癌 青 天 。 不 知 天 上 宫 阅 ， 今 力 是 何 年 。 护 合生 凤 归 去 ， 又 名 琼 模 
苏轼 玉宇 ， 高 处 不 柱 塞 。 想 务 于 和 铺 影 ， 何 羽 在 人 间 人 
小 


; 转 未 阅 ， 情 绑 户 ， 昭 元 卢 。 不 应 有 候 ， 何 事 长 向 别 时 回 ? 人 有 非 欢 高 舍 ， 月 有 阴 铺 
- 宕 图 缺 ， 此 事 古 难 全 。 但 原 人 长 义 ， 千 里 共 婵 姆 。 
: 虽 


os 两 搬 中 秋 ， 欢 饮 达 日 ， 大 醉 ， 作 此 篇 ， 兼 怀 子 由 。 宋词 精 选 
有 明月 几时 有 ? 把 酒 问 青天 。 不 知 天 上 宫 阅 ， 今 夕 是 何 年 。 我 上 
词 人 列表 从 季风 肯 去， 叉 冯 球 村 玉宇， 高 处 丰 胜 这 起 务 玛 清 彩 ， 何 : 号 

b 8 看 


要 于 转 朱 交 ， 低 绮 户 ， 妥 无 卢 。 不 应 有 恨 ， 何 事 长 向 别 时 图? 人 


有 悲欢离合， 月 有 阴 请 圆 缺 ， 此 事 古 难 全 。 但 愿 人 长 久生 
- 名 里 共 婵娟 。 





13.3 ”宽度 在 639 像素 以 上 、1000 像素 以 下 时 效果 图 13.4 宽度 在 640 像素 以 下 时 效果 


广 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 
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13.2.3 ”设计 响应 式 菜单 
会 内 / 本 例 设 计 一 个 响应 式 菜单 ， 能 够 根据 设备 显示 不 同 的 伸缩 盒 布局 效果 。 在 小 屏 设备 上 ， 从 上 到 
一 一 ”下 显示 ;在 默认 状态 下 ， 从 左 到 右 显 示 ， 右 对 齐 盒子 ， 当 设备 小 于 801 像素 时 ， 设 计 导 航 项 目 分 散 
对 齐 显 示 ， 预 览 效 果 如 图 13.5 所 示 。 


[localhost/mysite/test| x D localhost/mysite/testht x 











小 于 601 像 素 屏幕 介 于 600 和 800 像 素 之 间 设 备 


[| localhost/mysite/test.ht x 
SS 3 © D0 localhost/mysite/test.html 








大 于 799 像 素 屏 幕 
图 13.5 定义 伸缩 项 目 居中 显示 
示例 主要 代码 如 下 。 
<style type="text/css"> 
让 默 认 伸缩 布局 */ 
.navigation { 


list-style: none; 

margin: 0: 

background: deepskyblue: 

谍 启动 伸缩 盒 布 局 */ 
display: -webkit-box; 
display: -moz-box; 

display: -ms-flexbox: 
display: -webkit-flex: 
display: flex:; 
-webkit-flex-flow: row wrap; 
上 # 所 有 列 面向 主轴 终点 位 置 靠 齐 */ 
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Justify-content: flex-end; 
} 
上 # 设 计 导 航 条 内 超 链接 默认 样式 状 
.navigation a { text-decoration: none; display: block: padding: lem: color: white;} 
席 设 计 导 航 条 内 超 链接 在 鼠标 指针 经 过 时 的 样式 */ 
.navigation a:hover { background: blue: } 
/# 在 小 于 801 像素 设备 下 伸缩 布局 */ 
(media all and (max-width: 800px) { 
上 # 当 在 中 等 屏幕 中 ， 导 航 项 目 居 中 显示 ， 并 且 剩 余 空间 平均 分 布 在 列表 之 间 */ 
.navigation { justify-content: Space-around: }} 
/# 在 小 于 601 像素 设备 下 伸缩 布局 */ 
media all and (max-width: 600px) { 
.navigation { /* 在 小 屏幕 下 ， 没 有 足够 空间 进行 行 排 列 ， 可 以 换 成 列 排列 * 


-webkit-flex-flow: column wrap: 





flex-flow: column wrap; 
padding: 0:} 
.navigation a { 


text-align: center:; 


padding: 10px; 
border-top: 1px solid rgba(255,255,255,0.3); 
border-bottom: 1px solid rgba(0,0,0,0.1);} 
.navigation li:last-of-type a { border-bottom: none; } 
} 
</style> 


<ul class="navigation"> 
<]i><a hre 伍 "#"> 首 页 </a></li> 
<]i><a hre 住 "#"> 咨 询 </a></li> 
<]i><a hre 住 "#"> 产 品 </a></li> 
<]i><a hre 伍 #"> 关 于 </a></li> 
</ul> 


13.2.4 ”设计 自动 隐藏 布局 3 


本 例 将 设计 一 个 初步 响应 式 页 面 布局 效果 ,并 能 根据 显示 屏幕 宽度 变化 自动 隐藏 或 调整 版 式 显示 。 站 呈 ee 
【操作 步骤 】 ， 视 
第 1 步 ， 新 建 HIMLS 文档 ， 在 头 部 <head> 标 签 内 定义 视 口 信息 。 使 用 <meta> 标 签 设置 视 口 缩 
放 比例 为 1， 让 浏览 器 使 用 设备 的 宽度 作为 视图 的 宽度 ， 并 禁止 初始 缩放 ， 代 码 如 下 。 
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第 2 步 , IE 8 或 者 更 早 的 浏览 器 并 不 支持 媒体 查询 。 可 以 使 用 media-queries.js 或 者 respond.js 插 
件 进行 兼容 ， 代 码 如 下 。 


第 3 步 ， 设 计 页 面 HTML 结构 。 整 个 页 面 基 本 布局 包括 头 部 、 内 容 、 侧 边栏 和 页 脚 。 内 容 容 器 
。 宽度 是 600 像素 ， 而 侧 边栏 宽度 是 300 像素 。 代 码 如 下 ， 效 果 如 图 13.6 所 示 。 
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€ > 外 - Ehttp://localhost:8080/mysite/test.html 


唐诗 赏析 
水 调 歌 头 .明月 几时 有 


苏轼 





两 辰 中 秋 ， 欢 饮 达 旦 ， 大 醉 ， 作 此 篇 ， 兼 怀 子 由 。 


明月 几时 有 ? 把 酒 问 青天 。 不 知 天 上 富 网 ， 今 夕 是 何 年 。 我 欲 乘 风 归 去 ， 义 恐 琼 楼 玉 
宇 ， 高 处 不 胜 弯 。 起 舞 弄 清 影 ， 何 似 在 人 间 ? 


转 朱 同 ， 低 绮 户 ， 有 照 无 限 。 不 应 有 恨 ， 和 何事 长 向 别 时 圆 ? 人 有 悲欢离合 ， 月 有 阴 晴 贺 
缺 ， 此 事 古 难 全 。 但 愿 人 长 义 ， 千 里 共 婵 恕 。 


词 人 列表 





图 13.6 设计 页 面 结构 


第 4 步 , 使 用 CSS3 媒体 查询 设计 当 视 图 宽度 小 于 等 于 980 像素 时 , 如 下 规则 将 会 生效 。 基本 上 ， 
会 将 所 有 的 容器 宽度 从 像素 值 设 置 为 百分比 以 使 得 容器 大 小 自 适应 ， 代 码 如 下 。 


上 当 窗 口 视图 小 于 等 于 980 像素 时 响应 下 面 样式 */ 
media screen and (max-width: 980px) { 

#pagewrap { width: 94%:; } 

#content { width: 65%:; } 

#sidebar { width: 30%; } 
} 


第 $ 步 , 为 小 于 等 于 700 像素 的 视图 指定 <div id="content"> 和 <div id="sidebar"> 的 宽度 为 自 适 应 ， 
并 且 清 除 浮 动 ， 使 得 这 些 容器 按 全 宽度 显示 ， 代 码 如 下 。 


/# 当 窗 口 视 图 小 于 等 于 700 像素 时 响应 下 面 样式 */ 
(media screen and (max-width: 700px) { 


#content { 
width: auto:; 
float: none: 

} 

#sidebar { 
width: auto: 
float: none: 

} 


} 


第 6 步 ， 对 于 小 于 等 于 480 像素 〈 手 机 屏幕 ) 的 情况 ， 将 hl 和 h2 的 字体 大 小 修改 为 16 像素 ， 
并 隐藏 侧 边 栏 <div id="sidebar">， 代 码 如 下 。 
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旋 当 窗口 视 图 小 于 等 于 480 像素 时 响应 下 面 样式 */ 


(media screen and (max-width: 480px) { 
hl, h2 { font-size: 16px; } 
#sidebar { display: none; } 

} 


第 7 步 ， 可 以 根据 需要 添加 更 多 媒体 得 询 ， 目 的 在 于 为 指定 的 视图 宽度 指定 不 同 的 CSS 规则 ， 


从 而 实现 不 同 的 布局 。 示 例 演示 效果 如 图 13.7 所 示 。 


ll +) - SS betei /ocelhomt 0900 mrte tertht ~- GG ocahort 


唐诗 赏析 
水 调 歌 头 ' 明 月 几时 有 
苏 生 


丙 磺 中 秋 ， 欢 饮 达 旦 ， 大 醉 ， 作 此 篇 ， 菲 坏 子 由 。 


四 风 ， 今 夕 县 何 年 。 我 欲 钙 风 归 去 ， 久 地 琼 配 玉 
字 , 不 性 赛 。 A ey 了? 


转 示 几 ， 低 坪 户 ， 照 元 轧 。 不 应 有 恨 ， 何 训 长 向 制 时间 9 人 有 莫 次 高 合 ， 户 有 有 阴 请 图 
起 ， 此 事 古 难 全 。 但 原 人 长 久 ， 千 里 共 妊 了 


证 
: 直 
词 人 列表 


平板 屏幕 下 效果 





S| -rps/ocalho.. ~ B¢ | localhost 
唐诗 赏析 
水 调 歌 头 -明月 几时 有 
荔 二 
两 展 中 秋 ， 欢 饮 达旦 ， 大 醉 ， 作 此 简 ， 莱 怀 子 由 。 
明月 人 对 让 ?招商 站 丙 天 。 不 知 天 上 富 晤 ， 今 是 人 

馈 汪 风 归 去 ， 又 多 玉楼 玉宇， 高 处 不 胜 杰 起 和 
雪 消 影 ， 何 人 全 大 各 

， 昭 无眠 。 不 应 有 恨 ， 何 事 长 向 别 时 

国信 和 村 多 生生， 月 有 疝 入 以 ,外事 吉 蕉 ， 介 区 
人 长 久 ， 千 里 共 寻 娟 ， 
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手机 屏幕 下 效果 


13.7 设计 不 同 宽度 下 的 视图 效果 


13.2.5 ”设计 自 适 应 手机 页 面 


本 例 设计 页 面 宽度 为 980 像素 , 对 于 困 面 屏幕 来 说 , 该 宽度 适用 于 任何 宽 于 1024 像素 的 分 辨 率 。 
通过 媒体 查询 监测 宽度 小 于 980 像素 的 设备 ， 并 将 页 面 宽度 由 固定 方式 改 为 液态 版 式 ， 布 局 元 素 的 
宽度 随 着 浏览 器 窗口 的 尺寸 变化 进行 调整 。 当 可 视 部 分 的 宽度 进一步 减 小 到 650 像素 以 下 时 ， 主 要 
内 容 部 分 的 容器 宽度 会 增 大 至 全 屏 ， 而 侧 边栏 将 被 置 于 主 内 容 部 分 的 下 方 ， 整 个 页 面 变 为 单列 布局 。 


演示 效果 如 图 13.8 所 示 。 
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13.8 在 不 同 宽度 下 的 视图 效果 
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【操作 步骤 】 


第 1 步 ， 新 建 HIMLS 文档 ， 构 建文 档 结 构 ， 包 括 页 头 、 主 要 内 容 部 分 、 侧 边栏 和 页 脚 ， 代 码 
如 下 。 


<div 1d="pagewrap"> 
<header 1d="header"> 
<hgroup> 
<hl id="site-logo"> 网 站 LOGO</h1> 
<h2 id="site-description"> 网 站 描述 信息 </h2> 
</hgroup> 
<nav> 
<ul 1d="main-nav"> 
<li><a hre 伍 "#"> 导 航 链接 ， 可 以 扩展 </a></li> 
</ul> 
</nav> 
<form 1d="searchform"> 
<Input type="search"> 
</form> 
</header> 
<dlv 1d="content"> 
<article class="post"> 主 体内 容 区 域 </article> 
</div> 
<aslde 1d="sidebar"> 
<section class="widget"> 侧 栏 栏目 </section> 
</aside> 


<footer 1d="footer"> 页 脚 区 域 </footer> 
</div> 


第 2 步 ，IE 9 之 前 的 浏览 占 不 支持 HIMLS 标签 ， 使 用 html5.js 来 帮助 这 些 旧 版 本 的 正 浏览 器 
创建 HIMLS 元 素 节 点 ， 代 人 码 如 下 。 


<!--[flt IE 9]> 


<script sTc="http:/htmlSshim.googlecode.comysvn/trunkhtmls.]s"></Scrip 人 > 
<![endlif]--> 


第 3 步 ， 设 计 HIMLS 块 级 元 素 样式 ， 将 这 些 新 元 素 声明 为 块 级 样式 ， 代 码 如 下 。 
article, aslde, detalls, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block: } 


第 4 步 ， 设 计 主 要 结构 的 CSS 样式 。 这 里 将 注意 力 集中 在 整体 布局 上 。 整 体 设计 在 默认 情况 下 
页 面容 器 的 固定 宽度 为 980 像素 , 页 头 部 分 (header ) 的 固定 高 度 为 160 像素 , 主要 内 容 部 分 (content) 
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| 的 宽度 为 600 像素 ， 左 浮动 。 侧 边栏 (sidebar) 右 浮动 ， 宽 度 为 280 像素 ， 代 码 如 下 。 





第 $ 步 , 在 页 面 中 调用 css3-mediaqueries.js 文件 , 解决 契 8 及 以 前 版 本 支持 CSS3 媒体 查询 的 问 
题 ， 代 码 如 下 。 





第 6 步 ， 创建 CSS 样式 表 ， 并 在 页 面 中 调用 ， 代 码 如 下 。 


第 7 步 ， 借 助 媒体 查询 设计 自 适 应 布局 。 
当 浏 览 器 可 视 部 分 宽度 大 于 650 像素 .小 于 981 像素 时 ,将 pagewrap 的 宽度 设置 为 95%, 将 content 
的 宽度 设置 为 60%， 将 sidebar 的 宽度 设置 为 30%， 代 码 如 下 。 
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第 8 步 ， 当 浏览 器 可 视 部 分 宽度 小 于 651 像素 时 ， 将 header 的 高 度 设置 为 auto; 将 searchform 
绝对 定位 在 top: 5px 的 位 置 ; 将 main-nav、site-logo、site-description 的 定位 设置 为 static; 将 content 
的 宽度 设置 为 auto〈 主 要 内 容 部 分 的 宽度 将 扩展 至 满 屏 )， 并 取消 float 设置 ; 将 sidebar 的 宽度 设置 
为 100%， 并 取消 float 设置 ， 代 码 如 下 。 





第 9 步 ， 当 浏览 器 可 视 部 分 宽度 小 于 481 像素 时 ，480 像素 也 就 是 传统 手机 横 屏 时 的 宽度 。 当 可 视 
部 分 的 宽度 小 于 481 像素 时 ， 蔡 用 HIML 节点 的 字号 自动 调整 。 默 认 情 况 下 ， 手 机 会 将 过 小 的 字号 放 
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大 ， 这 里 可 以 通过 -webkit-text-size-adjust 属性 进行 调整 ， 将 main-nav 中 的 字号 设置 为 90%， 代 码 如 下 。 


(media screen and (max-width: 480px) { 
html {-webkit-text-size-adjust: none:} 
#main-nav a { 

font-size: 90%: 
padding: 10px 8px:; 


} 


第 10 步 ， 设 计 弹 性 图 片 。 为 图 片 设 置 max-width: 100% 和 height: auto， 设 计 图 像 弹性 显示 ， 代 
码 如 下 。 
Img { 
max-width: 100%; helght: auto: 
width: auto\9: /* 兼 容 IE 8 */ 
} 
第 11 步 ， 设 计 弹 性 视频 。 对 于 视频 也 需要 做 max-width: 100% 的 设置 ， 但 是 Safari 对 embed 的 
该 属性 支持 不 是 很 好 ， 所 以 使 用 width: 100% 来 代替 ， 代 码 如 下 。 


.Video embed, .video object, .video iframe { 
width: 100%:; min-height: 300px:; 
height: auto: 
} 
第 12 步 ， 在 默认 情况 下 ， 手 机 冰 Safari 浏览 器 会 对 页 面 进 行 目 动 缩放 ， 以 适应 屏幕 尺寸 。 这 里 
可 以 使 用 以 下 的 meta 设置 ， 将 设备 的 默认 宽度 作为 页 面 在 Safari 的 可 视 部 分 宽度 ， 并 禁止 初始 化 缩 
放 ， 代 码 如 下 。 


<meta name="viewport" content="width=device-width; nitial-scale=1.0"> 


13.3 在 线 练 习 


1. 练习 啊 应 式 网 页 设计 。 
2. 复习 CSS3 重要 属性 ， 强 化 训练 和 应 用 CSS3 新 功能 的 能 力 。 
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使 用 JavaScript 控制 CSS 样式 


在 网 页 设计 中 ， 经 常会 用 JavaScript 代码 控制 页 面 样式 ， 这 种 样式 也 称 为 脚本 样式 ， 因 
此 用 户 要 了 解 JavaScript 代码 的 基本 用 法 和 操作 CSS 样式 的 一 般 方 法 。 本 章 将 介绍 如 何 使 
用 JavaScript 控制 CSS 样式 来 设计 各 种 动态 效果 。 


【 学 习 要 点 】 

了 解 使 用 JavaScript 控制 CSS 样式 的 方法 。 
使 用 JavaScript 榨 制 网 页 对 象 的 大 小 和 显 隐 。 
设计 运动 效果 。 

设计 渐 隐 、 渐 显效 果 。 

在 网 页 中 添加 各 种 交互 式 响应 或 动态 特效 。 


部 音 理 可 有 
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14.1 在 网 页 中 使 用 JavaScript 脚本 





JavaScript 是 目前 最 流行 、 应 用 最 广泛 的 Web 编程 语言 。 一 般 情况 下 ，JavaScript 代码 只 能 够 在 
网 页 中 发 挥 作用 ， 当 然 编 写 JavaScript 代码 的 方法 也 很 简单 。 


14.1.1 使 用 <script> 标 签 


\ 在 HIML 页 面 中 嵌入 JavaScript 脚本 需要 使 用 <scrip 人 标签 , 用 户 可 以 在 <scrip 人 标签 中 直接 编写 
/ JavaScript 代码 ， 或 者 单独 编写 JavaScript 文件 ， 然 后 通过 <script> 标 签 导 入 。 
【示例 1】 直 接 在 页 面 中 舱 入 JavaScript 代码 。 
第 1 步 ， 新 建 HIML 文档 ， 保 存 为 test.html。 然 后 在 <head> 标 签 内 插入 一 个 <scrip 全 标签 。 
第 2 步 ， 为 <scrip 全 标签 指定 type 属性 值 为 "text/javascript"。 现 代 浏 览 器 默认 <scrip 全 标签 的 类 型 
为 JavaScript 脚本 ， 因 此 省 略 type 属性 ， 依 然 能 够 被 正确 执行 ， 但 是 考虑 到 代码 的 兼容 性 ， 建 议定 
义 该 属性 。 
第 3 步 ， 直 接 在 <scrip 亿 标签 内 部 输入 以 下 JavaScript 代码 。 





<script type="text/Javascript"> 
function hi(O){ 
document.write("<h1l>Hello, World!</h1>"); 
} 
Dig 
</script> 
上 和 面 JavaScript 脚 本 先 定义 了 一 个 hi0 函 数 , 该 函数 被 调用 后 会 在 页 面 中 显示 字符 "Hello,World! "。 
document 表示 DOM 网 页 文档 对 象 ，document.write() 表 示 调 用 Document 对 象 的 write0 方 法 ， 在 当前 
网 页 源 代码 中 写 入 HTML 字符 串 "<h1>Hello,World!</h1>"。 
调用 hi0 函 数 ， 浏 览 器 将 在 页 面 中 显示 一 级 标题 字符 "Hello,World! "。 
第 4 步 ， 保 存 网 页 文档 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 14.1 所 示 。 





Hello,World! 





图 14.1 第 一 个 JavaScript 程序 


包含 在 <scrip 全 标签 内 的 JavaScript 代码 被 浏览 器 从 上 至 下 依次 解释 执行 。 
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【示例 2】 包 含 外 部 JavaScript 文件 。 
第 1 步 ， 新 建文 本 文件 ， 保 存 为 testjs。 注 意 ， 扩 展 名 为 Js， 表示 该 文本 文件 是 JavaScript 类 型 
的 文件 。 


窑 提示 : 使 用 <script> 标 签 包 含 外 部 JavaScript 文件 时 ， 默 认 文件 类 型 为 JavaScript， 因 此 扩展 名 .js 
不 是 必需 的 , 浏览 器 不 会 检查 包含 JavaScript 的 文件 的 扩展 名 。 在 高 级 开发 中 , 使 用 JSP、 
PHP 或 其 他 服务 器 端 语言 动态 生成 JavaScript 代码 时 可 以 使 用 任意 扩展 名 ,如果 不 使 用 .js 
扩展 名 ， 用 户 应 确保 服务 器 能 返回 正确 的 MIME 类 型 。 


第 2 步 ， 打 开 testjs 文本 文件 ， 在 其 中 编写 下 和 面 的 代码 ， 定 义 简 单 的 输出 函数 。 
function hi(O){ 

alert("Hello, World!"); 
} 


在 上 面 的 代码 中 ，alert0 表 示 Window 对 象 的 方法 ， 调 用 该 方法 将 弹出 一 个 提示 对 话 框 ， 显 示 参 
数字 符 串 "Hello,World!"。 
第 3 步 ， 保 存 JavaScript 文件 ， 注 意 与 网 页 文件 的 位 置 关 系 。 这 里 保存 JavaScript 文件 位 置 与 调 
用 该 文件 的 网 页 文件 位 于 相同 目录 下 。 
第 4 步 ， 新 建 HTML 文档 ， 保 存 为 testl.html。 然 后 在 <head> 标 签 内 插入 一 个 <scrip 亿 标签 。 定 
义 src 属性 ， 设 置 属性 值 为 指向 外 部 JavaScript 文件 的 URL 字符 串 。 代 码 如 下 。 


<script type="text/Javascript" src="test.]s"></script> 


第 5 步 ， 在 上 面 <script 标 签 下 一 行 继续 插入 一 个 <scrip 人 标签， 直接 在 <script> 标 签 内 部 输入 
JavaScript 代码 ， 调 用 外 部 JavaScript 文件 中 的 hi0 函 数 。 

<script type="text/Javascript" src="test.Js"></script> 

<script type="text/Javascript"> 

hiO: // 调 用 外 部 JavaScript 文件 的 函数 

</script> 


第 6 步 ， 保 存 网 页 文档 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 14.2 所 示 。 


© -> 全 t/mysite/test1.html Pr ac 2 正在 等 待 |localhost x 





[a Hello,Worid! 


二 二- 





图 14.2 调用 外 部 函数 弹出 提示 对 话 框 
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全 提示 : 定义 src 属性 的 <script> 标 签 不 应 再 包含 JavaScript 代码 。 如 果 误 入 了 代码 ， 则 只 会 下 载 并 
执行 外 部 JavaScript 文件 , 误 入 代码 会 被 忽略 。src 属性 可 以 包含 外 部 域 的 JavaScript 文件 ， 
如 下 所 示 。 


<script type="text/Javascript" src="http://www.sothersite.com /test.]s"></script> 


14.1.2 ”比较 脚本 样式 与 CSS 样式 
JavaScript 代码 与 CSS 代码 不 会 相互 干扰 ,但 是 由 于 JavaScript 可 以 控制 CSS 样式 ， 所 以 它们 之 





讲解。 间 仍然 存在 某 些 关联 。 对 于 CSS 文件 来 说 ， 样 式 所 引用 的 外 部 文件 的 路 径 都 是 以 代码 所 在 位 置 作为 


参考 来 进行 设置 的 ， 而 JavaScript 恰恰 相反 ， 它 是 以 所 引用 的 网 页 位 置 作为 参考 进行 设置 的 。 
【示例 】 有 一 个 简单 的 站 点 结构 ， 网 页 文件 位 于 根 目录 ， 而 CSS 文件 、JavaScript 文件 和 图 像 文 
件 都 位 于 根 目 录 下 images 文件 夹 中 ， 如 图 14.3 所 示 。 


/( 根 目录 ) 


文件 夹 (images) 网 页 文件 
(index.htm!l) 











背景 图 像 1 
(js.gif) 


图 14.3 一 个 简单 站 点 结构 


下 面 分 别 使 用 CSS 样式 和 JavaScript 脚本 样式 为 网 页 中 的 <div id="box"> 标 签 定义 背景 图 像 。 
【操作 步骤 

第 1 步 ， 新 建 样 式 表 文件 ， 保 存 为 css.css， 存 放 于 images 文件 夹 中 。 

第 2 步 ， 在 CSS 样式 表 文 件 (css.css〉 中 定义 方法 如 下 。 
#box { 

background:url(css.gif); 
} 
CSS 文件 与 背景 图 像 文件 都 在 同一 目录 (images 文件 夹 ) 下 ， 所 以 可 以 直接 引用 ， 而 不 用 考虑 
网 页 文件 的 位 置 。 
第 3 步 ， 新 建 JavaScript 文本 ， 保 存 为 jsjs， 存 放 于 images 文件 夹 中 。 
第 4 步 ， 在 js.js 文件 中 输入 下 面 的 代码 ， 使 用 JavaScript 脚本 定义 <div id="box"> 的 背景 图 像 。 


.466 。 


第 ] 4 章 使 用 JavaScript 控制 CSS 样式 一 好 


window.onload = function() { 
document.getElementBylId("box").style.backgroundImage="url(1mages/ js.g1f)"; | 


从 上 面 的 代码 可 以 看 到 ，JavaSeript 文件 所 引用 的 背景 图 像 路 径 是 以 网 页 文件 的 位 置 为 参考 来 进 
行 设置 的 ， 而 不 用 考虑 JavaScript 文件 的 具体 位 置 ， 如 果 网 页 文件 不 动 ， 则 JavaScript 文件 所 引用 的 

路 径 是 不 会 变化 的 。 

第 5 步 ， 新 建 网 页 文件 ， 保 存 为 index.html， 存 放 于 根 目 录 下 。 

第 6 步 ， 在 网 页 文件 中 同时 引用 CSS 和 JavaScript 文件 ， 代 码 如 下 。 





<style type="text/css"> 
#box { 
width:440px:; 
height:312px; 
} 
</style> 
<script type="text/Javascript" src="i1mages/]js.Js"></script> 
<link hre 伟 "Images/css.css" rel="stylesheet" type="text/css"> 


<div 1d="box"></div> 
第 7 步 ， 保 存 网 页 文档 ， 在 浏览 器 中 预览 ， 会 发 现 <div id="box"> 标 签 显示 JavaScript 脚本 定义 
的 背景 图 像 效 果 ， 如 图 14.4 所 示 。 


Xx 


-eee 





图 14.4 js.gif 优先 显示 


总 之 , JavaScript 文件 与 CSS 文件 中 代码 在 引用 外 部 图 像 文件 时 , 它们 的 相对 路 径 设 置 是 不 同 的 ， 


具体 区 分 如 下 。 
加 “CSS 文件 : 考虑 CSS 文件 与 导入 的 外 部 图 像 文 件 之 间 的 位 置 关系 。 


.467 . 














C (sss+DN0 网 页 样 并 与 布局 从 入 门 到 精通 ( 微 课 精 编 版 ) 


加 ”JavaScript 文件 : 考虑 网 页 文件 与 导入 的 外 部 图 像 文 件 之 间 的 位 置 关系 。 
同时 ， 当 使 用 CSS 和 JavaScript 同时 为 页 面 对 象 定义 样式 时 ，JavaScript 脚本 样式 的 优先 级 要 大 
于 CSS 样式 的 优先 级 。 


14.2 ”获取 网 页 对 象 


使 用 JavaScript 控制 CSS 样式 的 第 一 步 是 需要 获取 网 页 对 象 ， 以 实现 对 其 控制 。 
14.2.1 获取 元 系 


为 了 获取 文档 结构 中 的 元 素 节 点 ，DOM 提供 了 以 下 两 个 方法 。 
1. 使 用 getElementById() 方 法 


使 用 getElementById0 方 法 可 以 精确 获取 指定 元 素 的 引用 指针 ， 有 具体 用 法 如 下 。 


0o = document.getElementById(ID) 


其 中 o 表示 指定 元 素 的 引用 指针 , 参数 ID 表示 文档 结构 中 对 应 元 素 的 id 属性 值 。 如果 文 档 中 不 
存在 指定 元 素 ， 则 返回 值 为 null。 该 方法 只 适用 于 document 对 象 。 
【示例 1】 下 面 的 脚本 能 够 获取 对 <div id="box"> 对 象 的 控制 权 。 


<div id="box"> 盒 子 </div> 

<script> 

var box = document.getElementById("box"); / 获取 id 属性 值 为 box 的 指定 元 素 的 引用 指针 
</script> 


getElementById0 方 法 返回 指定 元 素 的 对 象 ， 这 个 对 象 包 含 nodeName、nodeType 等 属性 ， 简 单 
说 明 如 下 。 

加 ”nodeName 表示 市 点 的 名 称 。 如 果 是 元 素 节 点 ， 则 nodeName 返回 值 为 标签 名 称 ， 标 和 位 名称 
水 远 是 大 写 ; 如 果 是 属性 节点 ， 则 nodeName 返回 值 为 属性 的 名 称 ; 如 果 是 文本 节点 ， 则 
nodeName 返回 值 永 远 是 #ext 标识 从 ; 如 果 是 文档 节点 ， 则 nodeName 返回 值 永 远 是 
#document 标识 符 。 

外 ”nodeType 表示 节点 的 类 型 。 该 属性 的 返回 值 比 较 多 ， 常 用 节点 类 型 包括 : 1 表示 元 素 类 型 ， 
2 表示 属性 ，3 表示 文本 ，8 表示 注释 ，9 表示 文档 。 

【示例 2】 在 本 示例 中 ， 使 用 getElementById0 方 法 获取 <div id="box"> 对 象 的 引用 指针 ， 然 后 利 

用 nodeName、nodeType 属性 查看 该 对 象 的 节点 类 型 和 节点 名 称 ， 代 码 如 下 。 


<div id="box"> 盒 子 </div> 
<script> 
var box = document.getElementBylId("box"); / 获取 指定 盒子 的 引用 指针 
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var Info = "nodeName: "+ box.nodeName; / 获取 该 节点 的 名 称 

info += "nodeType: "+ box.nodeType; / 获取 该 节点 的 类 型 
alert(info): / 显示 提示 信息 会 浮 
</script> 





2. 使 用 getElementByTagName() 方 法 
使 用 getElementByTagName() 方 法 获取 指定 标签 名 称 的 所 有 元 素 对 象 ， 其 用 法 如 下 。 


a= document.getElementsByTagName(tagName) 


其 中 参数 tagName 表示 指定 名 称 的 标签 ， 该 方法 返回 值 为 一 个 元 系 集合 。 使 用 length 属性 可 以 


获取 集合 中 包含 元 系 的 个 数 ， 利 用 数组 下 标 可 以 确定 其 中 东 个 元 素 对 象 。 


【示例 3】 对 于 这 些 数组 元 素来 说 ， 由 于 它们 都 是 节点 对 象 ， 因 此 可 以 使 用 nodeName、nodeType 


属性 查看 该 对 象 的 节点 类 型 和 节点 名 称 ， 代 码 如 下 。 


全 提示 : 使 用 document.getElementsByTagName("*") 方 式 可 获取 文档 中 所 有 元 素 节点 。 不 过 这 个 方 


<p id="p1"> 段 落 文 本 1</p> 
<p id="p2"> 段 落 文本 2</p> 
<p id="p3"> 段 落 文 本 3</p> 


<script> 

var p= document.getElementsByTagName("p"); / 获取 文档 中 所 有 p 元 素 
alert(p[2].nodeName): // 显示 第 3 个 p 元素 对 象 的 节点 名 称 
</script> 


在 实际 开发 中 ， 常 用 for 循环 遍历 集合 中 所 有 元 素 。 

【示例 4 下 面 的 代码 就 是 使 用 for 结构 过 有 历 获得 的 所 有 p 元 素 , 并 设置 p 元 素 的 class 属性 为 red。 
<pi ="p1"> 段 落 文 本 1</p> 

<p 1 ="p2" 心 段落 文 本 2</p> 

<p id="p3"> 段 落 文本 3</p> 


<script> 

varp = document.getElementsByTagName("p"); 。 // 获取 文档 中 所 有 p 元 素 

for(var i=0:i<p.length:i++){ // 遍历 p 数据 集合 
plil.setAttribute("class","red"): // 为 每 个 p 元 素 添加 class 类 

} 

</script> 


法 很 少 用 ， 同 时 正 6.0 及 以 下 版 本 浏览 器 对 其 支持 不 是 很 好 。 对 于 下 浏览 器 来 说 ， 可 以 
通过 document.all 来 获取 文档 中 所 有 元 素 的 节点 。 
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14.2.2 ”使 用 CSS 选择 器 匹配 元 素 


HIMLS 引入 了 与 jQuery 选择 器 相似 的 DOM API 模块 ， 该 模块 中 的 querySelector0 和 
querySelectorAll0 方法 能 够 根据 CSS 选择 器 规范 , 便捷 定位 文档 中 指定 的 元 素 。 目前 主流 浏览 器 均 
文 持 它们 ， 包 括 IE8+、Firefox、Chrome、Safari 和 Opera。 

querySelector() 和 querySelectorAll0 方 法 的 参数 必须 是 符合 CSS 选择 器 规范 的 字符 串 。 不 同 的 是 ， 
querySelector() 方 法 返回 的 是 一 个 元 素 对 象 ，querySelectorAll0 方 法 返回 的 是 一 个 元 素 集 合 。 

【示例 1】 新 建 网 页 文档 ， 输 入 下 面 的 HTML 结构 代码 。 





<div class="content"> 
<ul> 
<]i> 首 页 < 由 > 
<li class="red"> 财 经 </li> 
<li class="blue"> 娱 乐 </li> 
<li class="red"> 时 尚 </li> 
<li class="blue"> 互 联网 </li> 
</ul> 
</div> 


如 果 要 获得 第 1 个 英 元 素 ， 可 以 使 用 如 下 方法 。 
document.querySelector(".content ul 11"); 

如 果 要 获得 所 有 【i 元素， 可 以 使 用 如 下 方法 。 
document.querySelectorAll(".content ul 11"); 


如 果 要 获得 所 有 class 为 red 的 了 元 泰 ， 可 以 使 用 如 下 方法 。 


document.querySelectorAll("li.red"); 


全 提示 : DOM API 模块 也 包含 getElementsByClassName( 方 法 ， 使 用 该 方法 可 以 获取 指定 类 名 的 
元 素 。 例如 : 


document.getElementsByClassName("red"); 

注意 ，getElementsByClassName() 方 法 只 能 够 接收 字符 串 ， 且 为 类 名 ， 而 不 需要 加 点 号 前 级 ， 如 
果 没 有 匹配 到 任何 元 北 则 返回 空 数 组 。 

CSS 选择 器 是 一 个 便捷 的 确定 元 素 的 方法 ， 这 是 因为 大 家 已 经 对 CSS 很 熟悉 了 。 当 需要 联合 得 
询 时 ， 使 用 querySelectorAll0 更 加 便利 。 
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【示例 2】 在 文档 中 一 些 1 元 素 的 class 名 称 是 red， 男 一 些 class 名 称 是 blue， 可 以 用 
querySelectorAll0 方 法 一 次 性 获得 这 两 类 节点 ， 代 人 码 如 下 。 


VY 
varlis= document.querySelectorAll("li.red, li.blue"); 由 





如 果 不 使 用 querySelectorAll0 方 法 ， 那 么 要 获得 同样 的 列表 ， 需 要 做 更 多 工作 。 一 个 办 法 是 选择 EE 
所 有 的 工 元 素 ， 然 后 通过 友 代 操作 过 滤 出 那些 不 需要 的 列表 项 目 ， 代 码 如 下 。 


var result = [], lisl = document.getElementsByTagName('li"), classname = "; 
for(var 1= 0, len = lisl.length; 1< len; 1++) { 


classname = ]is1l[1].className: 





If(classname 一 一 





|| classname === 'blue') { 


result.push(lis1[i]): 


} 


比较 上 面 两 种 不 同 的 用 法 ， 使 用 选择 器 querySelectorAll0 方 法 比 使 用 getElementsByTagName0O) 
的 性 能 要 快 很 多 。 因 此 ， 如 果 浏 览 器 支持 document.querySelectorAll0， 那 么 最 好 使 用 它 。 


14.3 操作 类 样式 


使 用 JavaScript 控制 CSS 样式 最 简单 、 最 直接 的 方法 是 为 元 素 添 加 或 删除 类 样式 。 
14.3.1 获取 类 样式 


DOM 定义 getAttribute( 方 法 可 以 获取 指定 元 素 的 属性 。 其 用 法 比较 简单 ， 只 要 指定 元 素 及 它 的 
属性 ， 即 可 快速 反馈 该 元 素 所 对 应 的 属性 值 。 

【示例 1】 本 示例 能 够 获取 红色 盒子 和 蓝 色 盒 子 ， 并 显示 这 些 元 素 所 包含 的 class 属性 值 ， 代 码 
如 下 。 





回 
”视频 时 


<script> 

window.onload = function() { 
var red = document.getElementById("red"): // 获取 红色 盒子 
alert(red.getAttribute("class")): // 显示 红色 盒子 的 class 属性 值 
var blue = document.getElementById("blue"); // 获取 蓝 色 盒 子 
alert(blue.getAttribute("class")); // 显示 监 色 盒子 的 class 属性 值 

} 

</script> 


<div id="red" class="red"> 红 盒子 </div> 
<div id='"blue" class="blue'" 蓝 盒子 </div 
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W 


所 传递 的 参数 是 一 个 字符 串 形式 的 元 素 属 性 名 称 。 返 回 的 是 一 个 字符 串 类 型 的 值 ， 如 果 给 定 属 
性 不 存在 ， 则 返回 的 值 为 null。 
会 & 【示例 2】 除 了 上 面 标准 读 取 属 性 的 方法 外 ，HTML DOM 模型 还 支持 快捷 读 取 属 性 的 方法 ， 代 


0 


window.onload = function() { 
var red = document.getElementByld("red"); 
alert(red.1d); 
var blue = document.getElementById("blue"); 
alert(blue.1d): 

} 


但 是 对 于 class 属性 ， 则 必须 使 用 className 属性 来 读 取 ， 因 为 class 是 JavaScript 保留 字 。 同样 ， 
要 读 取 for 属性 ， 则 必须 使 用 htmlFor 属性 名 ， 这 与 CSS 脚本 中 float 和 text 属性 被 改名 为 cssFloat 
和 cssText 原因 相同 。 

【示例 3】 使 用 className 读 取 类 样式 ， 代 码 如 下 。 


<script> 

window.onload = function() { 
var red = document.getElementById("red"): // 获取 红色 盒子 
alert(red.className): / 显示 红色 盒子 的 class 属性 值 
var blue = document.getElementById("blue"): // 获取 蓝 色 盒子 
alert(blue.className): / 显示 蓝 色 盒子 的 class 属性 值 

} 

</script> 


<div id="red" class="red"> 红 盒子 </div> 
<div id="blue" class="blue"> 蓝 盒子 </div 


【示例 4】 对 于 复合 类 样式 ， 需 要 使 用 split0 方 法 辟 开 返回 字符 串 ， 然 后 遍历 读 取 类 样式 ， 代 码 
如 下 。 

<script> 
window.onload = function() { 

/ 所 有 类 名 生成 的 数组 

var classNameArray = document.getElementByld("red").className.split(" "); 

for(var i in classNameArray ){ // 遍历 数组 

alert(classNameArray[i]): // 当前 class 名 


</script> 
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<div id="red" class="red blue"> 红 盒子 </div> 


14.3.2 ”添加 类 样式 





为 元 素 设置 属性 可 以 使 用 setAttribute(0) 方 法 实现 ， 用 法 如 下 。 


e.SetAttribute(name,value) 


参数 e 表示 指定 的 元 素 对 象 ， 人 参数 name 和 value 分 别 表示 属性 名 称 和 属性 值 。 属 性 名 称 和 属性 


值 必须 以 字符 串 的 形式 进行 传递 。 如 果 元 素 中 存在 指定 的 属性 ， 则 它 的 值 将 被 刷新 ， 如 果 不 存 在 ， 
则 setAttribute() 方 法 将 为 元 素 创 建 该 属性 并 赋值 。 


【示例 1】 本 示例 分 别 为 页 面 中 的 div 元 素 设 置 class 属性 ， 代 码 如 下 。 


<script> 

window.onload = function() { 
var red = document.getElementByld("red"); 
var blue = document.getElementBylId("blue"); 
red.setAttribute("class", "red"): 
blue.setAttribute("class", "blue"); 

} 

</script> 

<div id="red"> 红 盒子 </div> 

<div id="blue"> 蓝 盒子 </div> 


【示例 2】 使 用 setAttribute(0) 方 法 存在 弊 上 器， 一般 通过 className 设置 元 素 的 类 名 ， 代 人 码 如 下 。 


<script> 

window.onload = function() { 
var Ted = document.getElementBylId("red"); 
var blue = document.getElementById("blue"); 
red.className = "red"; 
blue.className = "blue"; 

} 

</script> 

<div id="red"> 红 盒子 </div> 

<div id="blue"> 蓝 盒子 </div> 


【示例 3】 直 接 使 用 className 添加 类 样式 ， 会 外 
式 添加 类 ， 代 码 如 下 。 


<script> 
window.onload = function() { 
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var red = document.getElementById( "Ted”): 
red.className = "red"; 
Ted.className += "blue"; 

} 

</script> 

<div id="red"> 红 盒子 </div> 





【示例 4】 使 用 徐 加 的 方式 添加 类 也 存在 问题 ， 这 样 容易 添加 大 量 重复 的 类 。 为 此 ， 我 们 定义 一 
个 检测 函数 ， 判 断 元 素 是 否 包含 指定 的 类 ， 然 后 决定 是 否 添 加 类 ， 代 码 如 下 。 


<script> 
function hasClass(element,className){ // 类 名 检测 函数 
var reg =new RegExp('(\s|’)'+ className + '(\s|®$)"); 
return reg.test(element.className); // 使 用 正则 检测 是 否 有 相同 的 样式 
} 
function addClass(elementclassName){ // 添 加 类 名 函数 


if(!hasClass(element, className)) 


element.className +=' ' + className: 


} 
window.onload = function() { 


var red = document.getElementByld("red"); 


addClass(red,'red'): 
addClass(red,'blue'"): 
} 
</script> 


<div id="red"> 红 盒子 </div> 


14.3.3 ”删除 类 样式 
DOM 使 用 removeAttribute(0) 方 法 可 以 删除 指定 的 属性 ， 用 法 如 下 。 





e.removeAttribute(name) 


其 中 e 表示 一 个 元 素 对 象 ， 而 参数 name 表示 元 素 的 属性 名 。 
【示例 1】 本 示例 演示 了 如 何 动态 设置 表格 的 边框 ， 代 码 如 下 。 


<script> 

window.onload = function( {// 绑 定 页 面 加 载 完毕 时 的 事件 处 理 函 数 
var table = document.getElementsByTagName("table")[0]:/ 获取 表格 外 框 的 引用 指针 
var del = document.getElementById("del"); / 获取 删除 按钮 的 引用 指针 
var reset = document.getElementBylId("reset"): / 获取 恢复 按钮 的 引用 指针 
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del.onclick = functionO{ // 为 删除 按钮 绑 定 事件 处 理 函 数 
table.removeAttribute("border"); // 移出 边框 属性 

} 

reset.onclick = function|O{ // 为 恢复 按钮 绑 定 事件 处 理 函 数 
table.setAttribute("border", "2");: / 设置 表格 的 边框 属性 





} 
</script> 
<table width="]100%" border="2"> 

<tr> 

<td> 数 据 表格 </td> 

</tr> 
</table> 
<button id="del"> 删 除 </button><button id="reset"> 恢 复 </button> 


在 上 面 的 示例 中 ， 设 计 了 两 个 按钮 ， 并 分 别 绑 定 不 同 的 事件 处 理 函 数 。 单 击 【 删 除 】 按 钮 即 可 


调用 表格 的 removeAttribute0 方 法 清除 表格 边框 ， 单 击 【 恢 复 】 按 钮 即 可 调用 表格 的 setAttribute() 方 
法 重新 设置 表格 边框 的 粗细 。 


则 使 用 空 字 符 痊 换 匹 配 到 的 子 字符 串 ， 从 而 实现 删除 类 名 的 目的 。 


【示例 2】 本 示例 演示 了 如 何 自 定义 删除 类 函数 ， 并 调用 该 函数 删除 指定 类 名 ， 代 码 如 下 。 


<script type="text/Javascript"> 
function hasClass(element,className){// 类 名 检测 函数 

var reg =new RegExp('(\s|’)'+ className + '(\s|$)"); 

return reg.test(element.className);: // 使 用 正则 检测 是 否 有 相同 的 样式 
}function deleteClass(elementclassName){ 

f(hasClass(element,className)){ 
element.className.replace(reg,' ); // 利 用 正则 捕获 到 要 删除 的 样式 的 名 称 ， 然 后 把 它 蔡 换 成 一 个 空 
白字 符 串 ， 就 相当 于 将 其 删除 


} 

window.onload = function() { 
var red = document.getElementByld("red"); 
deleteClass(red,'blue'"): 

} 

</script> 

<div id="red" class="red blue bold"> 红 盒子 </div> 


上 面 的 代码 是 使 用 正则 表达 式 检测 className 属性 值 字 符 串 中 是 否 包含 指定 的 类 名 ， 如 果 存 在 ， 
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14.4 操作 CSS 样式 





在 JavaScript 脚本 中 获取 页 面 元 素 之 后 ， 就 可 以 使 用 style 属性 获取 该 元 素 的 CSS2Properties 对 象 。 
CSS2Properties 包含 了 该 对 象 的 所 有 CSS 脚本 属性 。 设 置 这 些 属性 与 设置 CSS 样式 的 效果 是 一 样 的 。 


14.4.1 使 用 style 对 象 
DOM 定义 每 个 元 素 都 继承 一 个 style 对 象 ，style 对 象 包含 一 些 方法 ， 利 用 这 些 方法 可 以 与 CSS 
样式 实现 交互 。 但 是 ，style 对 象 针 对 的 是 行内 样式 ， 不 支持 操作 样式 表 ， 包 括 内 部 样式 表 (<style> 
标签 包含 的 样式 ) 和 外 部 样式 表 。 
1. getPropertyValue() 方 法 
getPropertyValue() 能 够 获取 指定 元 素 样 式 属性 的 值 。 具 体 用 法 如 下 。 


var value = e.style.getPropertyValue(propertyName) 
参数 propertyName 表示 CSS 属性 名 ,不 是 CSS 脚本 属性 名 ， 对 于 复合 名 应 该 使 用 连 字符 进行 连接 。 
【示例 1】 下 面 的 代码 使 用 getPropertyValue0 方 法 获取 行内 样式 中 的 width 属性 值 ， 然 后 输出 到 





盒子 内 显示 ， 如 图 14.5 所 示 。 


<script> 
window.onload = function(){ 
var box = document.getElementById("box"); 
var width = box.style.getPropertyValue("width"); 
box.innerHTML = "盒子 宽度 : " + width; 


} 
</script> 


// 获 取 <div id="box"> 
// 读 取 div 元 素 的 width 属性 值 
// 输 出 显示 width 值 


<div id="box" style="width:300px: height:200px:border:solid 1px red" > 盒子 </div> 


Ce > 全 hitp://localhost/m Dh “ 品 【@7 总 localhost 


盒子 宽度 : 300px 











图 14.5 使 用 getPropertyValue0 读 取 行 内 样式 
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早期 正 版 本 不 文 持 getPropertyValue(0) 方 法 , 但 是 可 以 通过 style 对 象 直 接 访 问 样 式 属性 ， 以 获取 
指定 样式 的 属性 值 。 


# 
会 提示 : 在 设置 CSS 脚本 属性 时 ， 应 注意 以 下 几 个 问题 。 会 
@ 由 于 float 是 JavaScript 保留 字 ， 人 禁止 用 户 使 用 。 因 此 ，CSS2Properties 内 没有 与 float 
属性 对 应 的 名 称 。 为 了 解决 这 个 问题 ,CSS2Properties 在 float 属性 前 增加 了 css 前 级 ， 
使 用 cssFloat 名 来 表示 脚本 中 的 float 属性 。 
@ 在 CSS 中 读 写 属 性 值 时 , 不 需要 考虑 值 的 类 型 。 但 是 在 JavaScript 中 , CSS2Properties 
对 象 认 定 所 有 CSS 属性 值 都 是 字符 串 ， 因 此 脚本 中 所 有 属性 值 都 必须 加 上 引号 ， 以 
表示 为 字符 串 数 据 类 型 。 例 如 : 





elementNode.style.fontFamily = "Arial, Helvetica, sans-serif"; 
elementNode.style.cssFloat = "left"; 
elementNode.style.color = "#ff0000"; 


@ 在 CSS 样 式 中 声明 尾部 的 分 号 不 能 够 作为 属性 值 的 一 部 分 被 引用 ， 脚 本 中 的 分 号 只 
是 JavaScript 语法 规则 的 一 部 分 ， 而 不 是 CSS 声明 中 分 号 的 引用 。 

@ 上 声明 中 属性 值 所 包含 的 单位 等 都 必须 作为 值 的 一 部 分 ， 完 整地 传递 给 CSS 脚本 属性 ， 
省 略 单位 则 所 设置 的 脚本 样式 无 效 。 例 如 : 


elementNode.style.width = "100px"; 


@ 在 脚本 中 可 以 动态 设置 属性 值 , 但 最 终 赋值 给 属性 的 值 应 是 一 个 字符 事 ， 且 必须 包含 
单位 。 例如 : 


elementNode.style.top = top + "px"; 
elementNode.style.right = right + "px"; 
elementNode.style.bottom = bottom + "px"; 
elementNode.style.left = left + "px"; 


【示例 2】 针 对 上 面 的 示例 代码 ， 可 以 使 用 如 下 方式 读 取 width 属性 值 。 


<script> 

window.onload = function(){ 
var box = document.getElementBylId("box"): 
var width = box.style.width:; 
box.innerHTML = "盒子 宽度 : "+ width:; 

} 

</script> 
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2. setProperty0 方 法 
setProperty0) 方 法 为 指定 元 系 设 置 样式 ， 具 体 用 法 如 下 。 


e.style.setProperty(propertyName, value, priority) 





参数 说 明 如 下 。 
外 ”propertyName: 设置 CSS 属性 名 。 
四 value : 设置 CSS 属性 值 ， 包 含 属性 值 的 单位 。 
四 ”priority: 表示 是 否 设置 limportant 优先 级 命令 ， 如 果 不 设 置 可 以 以 空 字符 串 表示 。 
【示例 3】 在 本 示例 中 使 用 setProperty0 方 法 定义 盒子 的 显示 宽度 和 高 度 分 别 为 400 像素 和 200 
像素 ， 代 码 如 下 。 
<script> 
window.onload = function(){ 
var box = document.getElementById("box': ”// 获 取 <div id="box"> 
box.style.setProperty("width","400px",""); /定义 盒子 宽度 为 400 像素 
box.style.setProperty("height","200px",""): // 定 义 盒子 高 度 为 200 像素 
} 
</script> 


<div id="box" style="border:solid 1px red" > 盒子 </div> 


如 果 要 兼容 早期 正 浏览 器 ， 则 可 以 使 用 如 下 方式 设置 。 


<script> 

window.onload = function() { 
var box = document.getElementBylId("box"): 
box.style.wldth = "400px"; 
box.style.height = "200px"; 


} 
</script> 


3. removeProperty() 方 法 


removeProperty0 方 法 可 以 移出 指定 CSS 属性 的 样式 声明 ， 具 体 用 法 如 下 。 
e.style. removeProperty (propertyName) 


4. item() 方 法 
item0 方 法 返回 style 对 象 中 指定 索引 位 置 的 CSS 属性 名 称 ， 有 具体 用 法 如 下 。 


var name = e.style.ltem(index) 
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参数 index 表示 CSS 样式 的 索引 号 。 

5. getPropertyPriorityO 方 法 

getPropertyPriority0 方 法 可 以 获取 指定 CSS 属性 中 是 否 附加 了 !important 优先 级 命令 , 如 果 存 在 ， 
则 返回 important 字符 串 ， 人 否则 返回 空 字符 串 。 

【示例 4】 在 本 示例 中 ， 定 义 鼠 标 指针 移 过 盒子 时 ， 设 置 盒子 的 背景 色 为 赣 色 ， 而 边框 颜色 为 红 
色 ， 当 移出 盒子 时 ， 又 恢复 到 盒子 默认 设置 的 样式 ， 而 单 击 盒子 时 则 在 盒子 内 输出 动态 信息 ， 显 示 
当前 盒子 的 宽度 和 高 度 。 代 码 如 下 ， 演 示 效 果 如 图 14.6 所 示 。 


<script> 
window.onload = function(){ 
var box = document.getElementById("box"): /获取 盒子 的 引用 
box.onmouseover = functionO { /定义 鼠标 指针 经 过 时 的 事件 处 理 函 数 
box.style.setProperty("background-color", "blue", ""); // 设 置 背 景色 为 蓝 色 
box.style.setProperty("border", "solid 50px red", ""); // 设 置 边框 为 50 像素 的 红色 实 线 
} 
box.onclick = functionO{ /定义 鼠标 单 击 时 的 事件 处 理 函 数 
box .innerHTML = (box.style.ltem(0) + ":" + box.style.getPropertyValue("width")); 
/显示 盒子 的 宽度 
box .innerHTML = box .InnerHIML + "<br>"+ (box.style.item(1)+ ":" + box.style.getPropertyValue 
("height")): /显示 盒子 的 高 度 
} 
box.onmouseout = functionO{ /定义 鼠标 指针 移出 时 的 事件 处 理 函 数 
box.style.setProperty("background-color", "red", ""): /设置 背景 色 为 红色 
box.style.setProperty("border", "solid 50px blue", ""): /设置 边框 为 50 像素 的 蓝 色 实 线 
} 
} 
</script> 


<div 1d="box" style="wldth:100px: height:100px; background-color:red: border:solid S0px blue:;"></div> 





默认 显示 效果 鼠标 指针 经 过 效果 鼠标 单 击 效果 
图 14.6 设计 动态 交互 样式 效果 
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【示例 5】 针 对 示例 4， 本 示例 使 用 一 种 快捷 方式 设计 相同 的 交互 效果 ， 这 样 能 够 兼容 下 早期 版 
本 ， 页 面 代码 如 下 。 


<script> 
window.onload = function() { 
var box = document.getElementById("box"): /获取 盒子 的 引用 
box.onmouseover = function() { 
box.style.backgroundColor = "blue"': /设置 背景 样式 
box.style.border = "solid S0px red"; /设置 边框 样式 
} 


box.onclick = function0{// 读 取 并 输出 行内 样式 
box .InnerHTML = "width:" + box.style.width:; 
box .InnerHTML = box .InnerHTML + "<br>"+ "height:" + box.style.helght: 
} 
box.onmouseout = function0{// 设 计 鼠 标 指 针 移出 之 后 ， 恢 复 默认 样式 
box.style.backgroundColor = "red": 
box.style.border = "solid S0px blue"; 


} 
</script> 


<div 1d="box" style="width:100px: height:100px; background-color:red:; border:solid S0px blue;"></div> 


【拓展 】 

韭 正 浏 览 器 也 支持 style 快捷 访问 方式 , 但 是 它 无 法 获取 style 对 象 中 指定 序号 位 置 的 属性 名 称 ， 
此 时 可 以 使 用 cssText 属性 读 取 全 部 style 属性 值 ， 再 借助 JavaScript 方法 把 返回 字符 串 辟 开 为 数组 。 

【示例 6】 在 本 示例 中 ， 使 用 cssText 读 取 全 部 行内 样式 字符 串 ， 然 后 使 用 String 的 split0 方 法 把 
字符 串 臂 开 为 数组 ， 使 用 for in 语句 壳 历 数组 ， 逐 一 读 取 每 个 样式 ， 再 使 用 split(0 方 法 辟 开 属性 和 属 
性 名 ， 最 后 格式 化 输出 显示 。 代 码 如 下 ， 演 示 效 果 如 图 14.7 所 示 。 


<script> 
window.onload = function(){ 
Var box = document.getElementById("box"): // 获 取 盒 子 的 引用 
var str = box.style.cssText: / 读 取 盒子 全 部 行内 样式 
var a = str.split(":"); // 把 行内 样式 字符 串 转 换 为 数组 
var temp— 
for(var b in a){ /遍历 行 内 样式 
var prop = a[b].split(":"): /把 每 个 样式 字符 串 臂 开 为 数组 
if(prop[0]) // 如 果 存 在 属性 ， 则 输出 显示 
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名 


碟 localhost x re: 


14.7 使 用 cssText 属性 获取 行内 样式 


使 用 getAttribute0 方 法 也 可 以 获取 style 属性 值 。 不 过 该 方法 返回 值 保留 style 属性 值 的 原始 模样 ， 
而 cssText 属性 返回 值 可 能 经 过 浏览 器 处 理 ， 且 不 同 浏览 器 返回 值 格式 略 有 不 同 。 
【示例 7】 本 示例 将 修改 示例 6 的 代码 ， 使 用 getAttribute0 方 法 获取 行内 样式 字符 串 信 息 ， 代 码 
如 下 。 : 
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</script> 


<div 1d="box" style="width:600px:; height:200px: background-color:#81F9AS: border:solld 2px blue:paddimng: 
10px"></div> 


14.4.2 ”使 用 styleSheets 对 象 


document 对 象 包含 一 个 styleSheets 属性 集合 ， 它 保存 了 文档 中 所 有 的 样式 表 ， 包 括 内 部 样式 表 
和 外 部 样式 表 。 

styleSheets 为 每 个 样式 表 定 义 了 一 个 cssRules 对 象 , 用 来 包含 指定 样式 表 中 所 有 的 规则 (样式 )。 
但 是 正 不 文 持 cssRules 对 象 ， 而 预定 义 了 mles 对 象 表示 样式 表 中 的 规则 。 

为 了 兼容 主流 浏览 器 ， 在 使 用 前 应 该 检测 用 户 所 使 用 浏览 器 的 类 型 ， 以 便 调用 不 同 的 对 象 ， 代 
人 码 如 下 。 


var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules: 


在 上 面 的 代码 中 ， 先 判断 浏览 器 是 否 支持 cssRules 对 象 ， 如 果 支 持 则 使 用 cssRules ( 非 正 浏览 
器 )， 和 否则 使 用 rules (IE 浏览 器 )。 

【示例 】 在 本 示例 中 ,通过 <style> 标 签 定 义 一 个 内 部 样式 表 ， 为 页 面 中 的 <div id="box"> 标 签 定义 
4 个 属性 : 宽度 、 高 度 、 背 景色 和 边框 。 然 后 在 脚本 中 使 用 styleSheets 访问 这 个 内 部 样式 表 ， 把 样式 
表 中 第 一 个 样式 的 所 有 规则 读 取 出 来 ， 在 盒子 中 输出 显示 。 人 代码 如 下 ， 效 果 如 图 14.8 所 示 。 


<style type="text/css"> 


#box { 
width: 400px: 
height: 200px; 
background-color:#BFFBSF: 
border: solid 1px blue; 

} 

</style> 

<script> 


window.onload = function(){ 
var box = document.getElementBylId("box"); 
Var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules:/ 判 断 浏 览 器 类 型 
box.innerHTML = "<h3> 盒 子 样式 </h3>" 
box.innerHTML += "<br> 边 框 : " + cssRules[0].style.border: // 读 取 cssRules 的 border 属性 
box.innerHTML += "<br> 背 景 : "+ cssRules[0].style.backgroundColor// 读 取 cssRules 的 background-color 属性 
box.innerHTML += "<br> 和 高度: "+ cssRules[0].style.height:// 读 取 cssRules 的 height 属性 
box.innerHTML += "<br> 宽 度 : "+ cssRules[0].style.width;// 读 取 cssRules 的 width 属性 
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} 
</script> 


<div 1d="box"></div> 


€ all S TT PD -RC 全 localhost 


边框 : 1px solid blue 





图 14.8 ”使 用 styleSheets 访问 内 部 样式 表 


宅 提示 : cssRules (或 rules ) 的 style 对 象 在 访问 CSS 属性 时 ,使 用 的 是 CSS 脚本 属性 名 ， 因 此 所 
有 属性 名 称 中 不 能 使 用 连 字符 。 例 如 : 


cssRules[0].style.backgroundColor; 
这 与 行内 样式 中 的 style 对 象 的 setProperty() 方 法 不 同 ，setProperty0) 方 法 使 用 的 是 CSS 属 
性 名 [e] 例 如 » 


box.style.setProperty("background-color", "blue", ""); 


14.4.3 ”访问 样式 


styleSheets 包含 文档 中 所 有 的 样式 表 , 用 户 可 以 通过 下 标 访问 每 个 样式 表 , 每 个 数组 元 素 代表 一 
个 样式 表 ， 数 组 的 索引 位 置 是 根据 样式 表 在 文档 中 的 位 置 决定 的 。 每 个 <style> 标 签 包 含 的 所 有 样式 
表示 一 个 内 部 样式 表 ， 每 个 独立 的 CSS 文件 表示 一 个 外 部 样式 表 。 

【示例 】 本 示例 演示 了 如 何 准确 找到 指定 样式 表 中 的 样式 属性 。 

第 1 步 ， 启 动 Dreamweaver， 新 建 CSS 文件 ， 保 存 为 stylel.css， 存 放 在 根 目 录 下 。 

第 2 步 ， 在 stylel.css 中 输入 下 面 的 样式 代码 ， 定 义 一 个 外 部 样式 表 。 


(@charset "utf-8"; 
body { color:black: } 


Pp { color:gray; } 
dv { color:white: } 


第 4 步 ， 使 用 <style> 标 签 定义 一 个 内 部 样式 表 ， 设 计 如 下 样式 。 
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<style type="text/css"> 
#box { color:green; } 
Ted { color:red; } 

.blue { color:blue; } 
</style> 





第 5 步 ， 使 用 <link> 标 签 导 入 外 部 样式 表 文 件 stylel.css， 代 码 如 下 。 


<link href—"stylel.css" rel="stylesheet" type="text/css" media="all" /> 


第 6 步 ， 在 文档 中 插入 一 个 <div id="box"> 标 签 ， 代 码 如 下 。 


<div 1d="box"></div> 


第 7 步 , 使 用 <scrip 亿 标签 在 头 部 位 置 插入 一 段 脚本 。 设 计 在 页 面 初始 化 完毕 后 , 使 用 styleSheets 
访问 文档 中 第 2 个 样式 表 ， 然 后 再 访问 该 样式 表 的 第 1 个 样式 中 的 color 属性 ， 代 码 如 下 。 
<script> 
window.onload = function() { 
var cssRules = document.styleSheets[11].cssRules || document.styleSheets[11].rules; 
var box = document.getElementBylId("box"); 
box.innerHTML = "第 二 个 样式 表 中 第 一 个 样式 的 color 属性 值 =" + cssRules[0].style.color: 


} 
</script> 


第 8 步 ， 保 存 页 面 ， 整 个 文档 的 代码 如 下 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<style type="text/css"> 

#box { color:green; } 

Ted { color:red; } 

.blue { color:blue: } 

</style> 

<link href—"stylel.css" rel="stylesheet" type="text/css" media="all" /> 

<script> 

window.onload = function(){ 
var cssRules = document.styleSheets[11].cssRules || document.styleSheets[11].rules; 
Var box = document.getElementBylId("box"); 
box.innerHTML = "第 二 个 样式 表 中 第 一 个 样式 的 color 属性 值 =" + cssRules[0].style.color: 
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} 

</script> 

</head> 

<body> 

<div 1d="box"></div> 
</body> 

</html> 





最 后 ， 在 浏览 器 中 预览 页 面 ， 则 可 以 看 到 访问 的 color 属性 值 为 black， 如 图 14.9 所 示 。 


全 到 ~ Bc | Elocalhost x 


第 二 个 样式 表 中 第 一 个 样式 的 color 属 性 值 = black 





图 14.9 使 用 styleSheets 访问 外 部 样式 表 


写 提示 : 在 上 面 的 示例 中 ， styleSheets[1] 表 示 外 部 样式 表 文 件 ( stylel.css ) ， 而 cssRules[0] 表 示 外 
部 样式 表 文 件 中 的 第 一 个 样式 。cssRules[0].style.color 可 以 获取 外 部 样式 表 文件 中 第 一 个 
样式 中 color 属性 的 声明 值 。 反之， 如 果 把 <link> 标 签 放 置 在 内 部 样式 表 的 上 面 ， 即 代码 
Ne 


<head> 

<link href—"stylel.css" rel="stylesheet" type="text/css" media="all" /> 
<style type="text/css"> 

#box { color:green; } 

-Ted { color:red; } 

-blue { color:blue; } 

</style> 

</head> 


上 面 脚本 将 返回 内 部 样式 表 中 第 一 个 样式 中 的 color 属性 声明 值 ， 即 为 green。 如 果 把 外 部 样式 
表 转 换 为 内 部 样式 表 ， 或 者 把 内 部 样式 表 转 换 为 外 部 样式 表 文件 ， 不 会 影响 styleSheets 的 访问 。 因 
此 ， 样 式 表 和 样式 的 索引 位 置 是 不 受 样式 表 类 型 和 样式 的 选择 符 限制 的 。 任 何 类 型 的 样式 表 ( 不管 
是 内 部 的 ， 还 是 外 部 的 ) 都 在 同一 个 平台 上 按 在 文档 中 解析 位 置 进行 索引 。 同 理 ， 不 同类 型 选择 符 
的 样式 在 同一 个 样式 表 中 也 是 根据 先后 位 置 进行 索引 。 
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14.4.4 ”编辑 样式 


: cssRules 的 style 对 象 不 仅 可 以 访问 属性 ， 还 可 以 设置 属性 值 。 
> 【示例 】 在 本 示例 中 ， 样 式 表 中 包含 3 个 样式 ， 其 中 蓝 色 样 式 类 (.blue) 定义 字体 显示 为 蓝 色 。 
利用 脚本 修改 该 样式 类 (blue 规则 ) 字体 颜色 为 浅 灰 色 (#999)。 代码 如 下 , 最 后 显示 效果 如 图 14.10 


<style type="text/css"> 
#box { color:green; } 
.Ted { color:red; } 

-blue { color:blue; } 
</style> 





<script> 

window.onload = function(){ 
var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules: 
cssRules[2].style.color="#999"; /修改 样式 表 中 指定 属性 的 值 


} 
</script> 


<p class="blue"> 原 为 蓝 色 字体 ， 现 在 显示 为 浅 灰 色 。</p> 


委 - 全 Ee TH Or 人 Eo 多 localhost 








图 14.10 ”修改 样式 表 中 的 样式 


窑 提示 : 上 述 方法 修改 样式 表 中 的 类 样式 ,会 影响 其 他 对 象 或 其 他 文档 对 当前 样式 表 的 引用 ， 因 
此 在 使 用 时 请 务必 谨慎。 


14.5 案例 实战 


本 节 将 通过 多 个 案例 帮助 读者 上 机 练习 使 用 JavaScript 控制 CSS 的 方法 。 
14.5.1 设计 显示 和 隐藏 


简单 的 隐藏 元 系 可 以 通过 style.display 属性 来 实现 。 
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现代 码 重 用 和 灵活 应 用 ， 并 能 够 兼容 人 不同 浏览 大 。 


不 指定 第 2 个 布尔 值 参数 ， 则 函数 将 对 元 素 进行 显示 或 隐藏 切换 ， 代 码 如 下 。 
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【示例 1】 本 示例 能 够 遍历 结构 中 所 有 的 p 元 素 ， 并 把 class 属性 值 不 为 main 的 段落 文本 全 部 隐 
代码 如 下 。 
<p>p1</p> 


<p class="maim">p2</p> 





<p>p3</p> 
<script> 
var p = document.getElementsByTagName("p'"); 
for(var i= 0;1<p.length; 1++ ){ 
if(plil.className == "main") continue:; 
// 如 果 class 属性 值 为 main， 则 跳 过 
plil.style.display = "none"; // 隐藏 元 素 
} 
</script> 


恢复 style.display 属性 的 默认 值 ， 只 需 设 置 style.display 属性 值 为 空 字 符 串 (style.display = "")。 
【示例 2】 由 于 显示 和 隐藏 是 交互 设计 中 经 常用 到 的 技巧 ， 所 以 有 必要 对 其 进行 功能 封装 ， 以 实 


当 指 定 元 系 和 布尔 值 参数 时 ， 元 系 能 够 根据 布尔 值 tue 或 false 决定 是 否 进行 显示 或 隐藏 ， 如 果 


/ 设置 或 切换 元 素 的 显示 或 隐藏 
// 参数 : e 表示 要 显示 或 隐藏 的 元 素 ，b 是 一 个 布尔 值 ， 当 为 true 时， 将 显示 元 素 e; 
当 为 false 时 ， 将 隐藏 元 素 e。 如 果 省 略 参 数 b， 则 根据 元 素 e 的 显示 状态 ， 进 行 显示 或 
隐藏 切换 
/ 返回 值 : 无 
function display(e, b){ 

// 监测 第 二 个 参数 的 类 型 。 如 果 该 参数 存在 且 不 为 布尔 值 ， 则 抛 出 异常 

if(b && (typeofb != "boolean")) throw new Error(" 第 二 个 参数 应 该 是 布尔 值 !"); 


var c = getStyle(e, "display"): // 获取 当前 元 素 的 显示 属性 值 
(c != "none") && (e. display = c): // 记录 元 素 的 显示 性 质 ， 并 存储 到 元 素 的 属性 中 
e. display =e. display || ""; // 如 果 没 有 定义 显示 性 质 ， 则 赋值 为 空 字符 串 
if(b || (¢ == "none") ){ // 第 二 个 参数 值 为 true 或 者 元 素 隐藏 
e.style.display = e. display:; / 调用 元 素 的 _display 属性 值 恢 复元 素 或 显示 元 素 
} 
else{ 
e.style.display = "none"; // 隐藏 元 素 
} 
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下 和 面 在 页 和 面 中 设置 一 个 同 右 浮动 的 元 素 p。 连 续 调 用 3 次 display0 函 数 后 ， 则 相当 于 隐 忠 元 素 ， 
代码 如 下 。 
<p style="float:right; border:solid 1px red; width:100px; 
height: 1 00px;">pl1</p> 
<script> 


var p= document.getElementsByTagName("p")[0]; 


display(p); // 切换 隐藏 
display(p); // 切换 显示 
display(p); // 切换 隐藏 
</script> 


不 管 元 素 是 显示 还 是 隐藏 ， 如 果 按 如 下 方式 调用 ， 则 会 显示 出 来 ， 元 素 显 示 为 原来 的 状态 ， 代 
人 码 如 下 。 
display(p , true); // 强制 显示 


14.5.2 ”设计 不 透明 度 


所 有 现代 浏览 器 都 支持 元 对 的 透明 度 ， 但 是 不 同 浏 览 器 对 于 元 系 透 明度 的 设置 方法 不 同 。 正 浏 
览 右 支持 filters 滤 镜 集 ， 而 文 持 DOM 标准 的 浏览 器 认可 style.opacity 属性 。 同 时 ， 它 们 设置 值 的 范 
围 也 不 同 ， 正 的 opacity 属性 值 范围 为 0 一 100， 其 中 0 表示 完全 透明 ， 而 100 表示 不 透明 。 而 支持 
style.opacity 属性 浏览 器 的 设置 值 范 围 是 0 一 1， 其 中 0 表示 完全 透明 ， 而 1 表示 不 透明 。 

【示例 1】 为 了 兼容 不 同 的 浏览 器 ， 可 以 把 设置 元 素 透 明度 的 功能 进行 函数 封装 ， 代 码 如 下 。 

/ 设置 元 素 的 透明 度 

// 参数 : e 表示 要 预 设置 的 元 素 ，n 表示 一 个 数值 ， 取 值 范围 为 0 一 100， 如 果 省 略 ， 

则 默认 为 100， 即 不 透明 显示 元 素 


// 返回 值 : 无 
function setOpacity(e, n){ 
var n = parseFloat(n); // 把 第 二 个 参数 转换 为 浮 点 数 


if(n ww (n>100) || !n) n=100; 
// 如 果 第 二 个 参数 存在 且 值 大 于 100， 或 者 不 存在 该 参数 ， 则 设置 其 为 100 


if(n && (n<0)) n=0; // 如 果 第 二 个 参数 存在 且 值 小 于 0， 则 设置 其 为 0 
if (e.filters){ / 兼容 正 浏览 器 
e.style.filter = "alpha(opacity=" + n+ ")"; 
} 
else{ / 兼容 DOM 标准 
e.style.opacity = n / 100; 
} 
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在 获取 元 素 的 透明 度 时 ， 应 注意 在 正 浏览 句 中 不 能 够 直接 通过 属性 读 取 ， 而 应 借助 filters 集合 
的 item0 方 法 获取 Alpha 对 象 ， 然 后 读 取 它 的 opacity 属性 值 。 

【示例 2】 为 了 避免 在 读 取 下 浏览 占 中 元 素 的 透明 度 时 发 生 错 误 ， 建 议 使 用 try 语句 包含 读 取 语 
句 ， 代 码 如 下 。 

// 获取 元 素 的 透明 度 


// 参数 : e 表示 要 预 设置 的 元 素 
// 返回 值 : 元 素 的 透明 度 值 ， 范 围 为 1 一 100 


function getOpaclty(e){ 
VaTT: 
1f (!e.filters){ 
1f (e.style.opacity) return parseFloat(e.style.opacity) * 100; 
} 
try{ 
return e.filters.1tem('alpha').opacity 
} 
catch(o){ 
return 100: 
} 
} 
14.5.3 ”设计 运动 对 象 
运动 效果 主要 通过 动态 修改 元 素 的 坐标 来 实现 。 设 计 的 关键 有 以 下 两 点 。 
加 ”应 考虑 元 素 的 初始 化 坐标 、 最 终 坐 标 ， 以 及 移动 坐标 等 定位 要 素 。 如 果 参 照 物 相同 ， 则 这 
个 问题 比较 好 解决 。 


名” 应 考虑 移动 的 速度 、 频 率 等 问题 。 移 动 可 以 借助 定时 器 来 实现 ， 但 效果 的 模拟 涉及 算法 问 
题 , 不 同 的 算法 可 能 会 设计 出 不 同 的 移动 效果 , 如 匀速 运动 、 加 速 运动 和 减速 运动 。 在 Flash 
动画 设计 中 ， 就 专门 提供 了 一 个 Tween 类 ， 利 用 它 可 以 模拟 出 很 多 运动 效果 ， 如 绥 动 、 弹 
黄 展 动 等 ， 其 技术 核心 是 算法 设计 问题 。 算 法 看 似 很 高 深 ， 其 实 通俗 一 点 讲 ， 就 是 通过 数 
学 函数 计算 定时 器 每 次 触发 时 移动 的 距离 。 
【示例 】 本 示例 演示 如 何 设计 一 个 简单 的 元 素 滑 动 效 果 。 通 过 指定 元 素 和 移动 的 位 置 ， 以 及 移动 
的 步 数 ,可 以 设计 按 一 定 的 速度 把 元 素 从 当前 位 置 移动 到 指定 的 位 置 。 本 示例 引用 前 和 面 介 绍 的 getBO 
方法 ， 该 方法 能 够 获取 当前 元 系 的 绝对 定位 坐标 值 ， 代 人 码 如 下 。 
// 简单 的 滑动 函数 
// 参数 : e 表示 元 素 ，x 和 y 表示 要 移动 到 的 最 后 坐标 位 置 (相对 包含 块 )，t 表示 元 素 移动 的 步 数 
function slide(e, x, y, t){ 
var t=t|| 100; / 初始 化 步 数 ， 步 数 越 大 ， 速 度 越 慢 ， 移 动 的 过 程 越 帝 真 ， 但 
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是 中 间 移 动 的 误差 就 越 明 显 
var o = getB(e): // 当前 元 素 的 绝对 定位 坐标 值 


var X0 = 0.X; 

var y0 = 0.y; 

var stepx = Math.round((x - x0) / 1f): 

/ 计算 x 轴 每 次 移动 的 步 长 ， 由 于 像素 点 不 可 用 小 数 ， 所 以 会 存在 一 定 的 误差 
var stepy = Math.round((y - y0) / 0): // 计算 y 轴 每 次 移动 的 步 长 





var out = setInterval(functionO{ // 设计 定时 器 
var 0 = getB(e): / 获取 每 次 移动 后 的 绝对 定位 坐标 值 


var X0 = 0.X; 
vor yO = oy; 
e.style["left"] = (x0 + stepx) + 'px'; // 定位 每 次 移动 的 位 置 
e.style["top"] = (yO0 + stepy) + 'px'; // 定位 每 次 移动 的 位 置 
1f (Math.abs(x - x0) <= Math.abs(stepx) || Math.abs(y - y0) <= 
Math.abs(stepy)) { // 如 果 到 终点 坐标 的 距离 小 于 步 长 ， 则 停止 循环 执行 ， 并 校正 
元 素 的 最 终 坐 标 位 置 
e.style["lef"] =x + 'px'; 
e.style["top"] =y + 'px'’; 
clearTimeout(out); 
); 
}, 2) 
); 


使 用 时 应 该 定义 元 系 绝 对 定位 或 相对 定位 显示 状态 ， 否 则 移动 无 效 。 在 网 页 动画 设计 中 ， 一 般 
都 使 用 这 种 定位 移动 的 方式 来 实现 ， 代 人 码 如 下 。 


<style type="text/css"> 

.block {width:20px: height:20px; posltlon:absolute: left:200px: 
top:200px; background-color:red; } 

</style> 

<div class="block" 1d="block1"></div> 

<script> 

templ] = document.getElementByld('block1"); 

slide(temp1, 400, 400,60): 

</script> 


14.5.4 设计 渐变 效果 
渐 隐 渐 显 效果 主要 通过 动态 修改 元 素 的 透明 度 来 实现 。 
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【示例 】 本 示例 演示 如 何 实现 简单 的 渐 隐 渐 显 动画 效果 , 主要 涉及 setOpacity0 函 数 的 调用 , 代码 如 下 。 


// 参数 : e 表示 渐 隐 渐 显 元 素 ，t 表示 渐 隐 渐 显 的 速度 ， 值 越 大 渐 隐 渐 显 速度 越 慢 ， 
io 表示 渐 隐 或 渐 显 的 方式 ， 取 值 true 表示 渐 显 ， 取 值 false 表示 渐 隐 





function fade(e,t 10){ 
var t=t|| 10; / 初始 化 渐 隐 渐 显 速度 
ifio){ / 初始 化 渐 隐 渐 显 方式 
var1= 0; 
}else{ 
var 1= 100: 
L 
var out = setInterval(function(O) { // 设计 定时 器 
setOpacity(e, i): // 调用 setOpacity0 函 数 
ifio) { / 根据 渐 隐 或 渐 显 方式 决定 执行 效果 

nm 


if(1 >= 100) clearTimeout(out); 
} 
else{ 
RE 
if(1 <= 0) clearTimeout(out); 
} 
}, b); 
} 


下 和 面 调用 该 函数 ， 代 人 码 如 下 。 


<style type="text/css"> 
.block {width:200px; height:200px; background-color:red; } 


</style> 

<div class="block" 1d="blockl1"></div> 

<script> 

e= document.getElementByld('block]1"):; 

fade(e,50,true): // 应 用 渐 隐 渐 显 动画 效果 
</script> 


14.5.5 ”设计 折合 面板 


折 蕉 面板 在 网 页 中 的 应 用 范围 比较 广 ， 从 技术 角度 分 析 ， 它 主要 利用 CSS 隐 茂 和 显示 属性 ， 借 
助 JavaScript 脚本 进行 动态 控制 。 本 节 设 计 的 打 有 登 面 板 演示 效果 如 图 14.11 和 图 14.12 所 示 。 
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14.11 展开 面板 效果 图 14.12 折 起 面板 效果 


【操作 步骤 】 


第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 testhtml。 构 建 HIML 结构 。 结 构 没 有 特殊 要 
求 ， 使 用 任何 两 个 标签 均 可 实现 折 狼 效果 ， 但 是 从 语义 角度 来 考虑 ， 使 用 定义 列表 是 最 佳 语义 结构 
选择 。dl 元 素 负 责 构 建 折 营 面板 的 外 框 ，dt 元 素 负 责 构 建 折 瑟 面板 的 标题 栏 ， 而 dd 元 素 负责 构建 面 
板 主 体 包含 框 ， 代 码 如 下 。 


<dl> 

<dt> 标 题 </dt> 

<dd> 折 车 区 域 <img src="images/3.jpg" width="300" /></dd> 
</dl> 


第 2 步 ， 在 设计 折合 行为 之 前 ， 我 们 先 假设 这 是 一 个 普通 的 列表 结构 。 然 后 使 用 CSS 来 控制 定 
义 列表 框 的 表现 效果 ， 代 人 码 如 下 。 


<style type="text/css"> 
dl {l* 定义 列表 框 样式 */ 
width:400px; 上 # 定义 折合 面板 的 宽度 ， 可 自 定义 */ 
border:solid 1px 大 cc: /#* 边框 ， 可 自 定义 */ 
font-size:12px: /#* 字体 大 小 ， 可 自 定义 */ 
} 


dt {l* 列表 标题 样式 */ 
background:#7FECAD url(images/green.gif) repeat-x: /* 用 背景 图 定义 渐变 标题 背景 */ 


color:#71790C: /# 字体 颜色 ， 可 自 定义 */ 
height:28px: /# 标题 高 度 */ 
line-height:28px: /# 行 高 ， 间 接 实现 垂直 对 齐 */ 
padding-left:lem: 上 # 增加 左 侧 空隙 */ 
border-bottom:solid 1px #efefef: 放 底部 边框 样式 */ 
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cursor:pointer; /*# 鼠标 指针 为 手 形 */ 
} 

dd {l# 列表 项 样式 */ 
padding:2px 4px: 上 # 增加 内 容 框 内 边 距 */ 
margin:0; 六 清除 缩 进 4 
} 

</style> 





第 3 步 ， 在 上 面 样式 表 的 基础 上 定义 两 个 类 样式 ， 分 别 用 来 隐藏 和 显示 对 象 ， 代 码 如 下 。 


.expand { overflow:visible: } /* 展开 面板 时 ， 显 示 所 有 内 容 区 域 */ 
.collapse { 谍 折合 面板 时 ， 仪 显示 标题 区 域 */ 
height:28px: /# 限制 列表 包含 框 高 度 ， 使 其 等 于 标题 栏 高 度 */ 
overflow:hidden: /* 强制 隐藏 多 出 的 区 域 */ 
} 


第 4 步 ， 完 成 结构 层 和 表现 层 的 设计 ， 下 面 就 来 设计 交互 层 。 在 JavaScript 脚本 中 定义 一 个 函数 


SwitchQO 用 作 展 开 和 折 欠 的 开关 ， 代 人 码 如 下 。 


<script> 

function Switch(df){ // 折 车 控制 函数 
var dl = dt.parentNode: // 获 取 标 题 栏 的 父 包含 框 
if(dl.className == "collapse")dl.className = "expand"; // 如 果 为 折 营 ， 则 展开 类 样式 
else dl.className = "collapse": // 相 反 调用 折 靶 类 样式 

} 

</script> 


第 5 步 ， 完 成 脚本 函数 的 设计 ， 然 后 把 它 绑 定 到 标题 栏 的 onclick 事件 属性 上 和 面 ， 代 码 如 下 。 


<dt onclick="Switch(this)"> 标 题 </dt> 


这 里 使 用 this 关键 字 作为 参数 进行 传递 ， 它 代表 当前 dt 元 素 的 引用 。 人 至 此 ， 整 个 折 锥 面板 的 设 


计 融 完成 了 。 


14.5.6 ”设计 工具 提示 


这 对 于 超 链接 《特别 是 图 像 式 超 链 接 ) 非常 有 用 。 同 时 ， 搜 索引 擎 也 喜欢 检索 这 些 信息 。 


用 JavaScript 脚本 动态 生成 一 个 浮动 的 层 ， 在 层 中 显示 这 些 提示 信息 ， 最 后 利用 Even 事件 对 象 的 鼠 
标 指 针 坐 标 属性 进行 定位 。 如 果 结 合 CSS 技术 ， 可 以 把 这 些 浮动 的 层 设 计 成 不 同样 式 ， 以 此 达到 个 





Tooltip〈 工 具 提 示 ) 是 一 种 比较 实用 的 JavaScript 应 用 。 当 为 一 个 元 素 〈 一 般 为 超 链接 a 元 素 ) 
定义 title 属性 时 ， 会 在 鼠标 指针 经 过 时 显示 提示 信息 ， 这 些 提示 能 够 详细 描绘 经 过 对 象 的 包含 信息 ， |， 人 和“ 


设计 思路 : 使 用 DOM 技术 获取 title (或 其 他 属性 ) 中 的 提示 信息 ， 然 后 把 这 些 属性 删除 ， 再 利 
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性 化 设计 的 要 求 。 
【示例 1】 本 示例 不 涉及 结构 层 和 表现 层 的 设计 ， 为 了 化 繁 为 简 ， 这 里 先 就 一 个 简单 的 案例 来 探 
] 索 Tooltip 脚本 的 实现 过 程 。 
第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 test.html。 在 文档 中 设计 如 下 超 链接 ， 其 提示 信 
恩 设 置 为 “title=" 提 示 信 息 "”。 下 面 尝 试 把 这 个 提示 信息 提取 出 来 ， 然 后 删除 该 属性 ， 最 后 使 用 一 个 
新 创建 的 div 元 素 动态 显示 它 的 位 置 ， 并 借助 CSS 美化 一 下 该 div 元 素 ， 代 码 如 下 。 


<a href="#" title=" 提 示 信 息 " target="” blank"> 超 链接 文本 </a> 


第 2 步 ， 在 脚本 中 获取 超 链接 元 素 a 以 及 该 标签 设置 的 ttle 属性 值 ， 代 码 如 下 。 


var a = document.getElementsByTagName("a")[0]: // 获 取 a 元素 的 引用 
vartit =a.getAttribute("title"); /获取 title 属性 值 ， 并 存储 到 一 个 变量 中 


第 3 步 ， 获 取 title 属性 值 之 后 ， 删 除 该 属性 ， 避 免 它 干 扰 设 计 ， 代 码 如 下 。 
a.removeAttribute("title"): // 移 出 title 属性 
第 4 步 , 创建 一 个 div 元 素 和 一 个 文本 节点 , 把 title 属性 值 赋予 文本 节点 , 然后 把 文本 节点 增加 


到 div 元 素 内 ， 设 置 div 元 素 样式 为 绝对 定位 ， 并 增加 一 个 class 属性 和 值 ， 以 便于 在 CSS 样式 表 中 
对 该 div 元 素 进行 更 个 性 化 地 控制 ， 代 码 如 下 。 


var div = document.createElement("div"): // 创 建 div 元 素 节点 

vartxt = document.createTextNode(tit); // 创 建文 本 节点 ， 并 显示 title 属性 值 
div.style.position = "absolute"; /为 div 元 素 定 义 一 个 绝对 定位 
div.setAttribute("class", "title"); /为 div 元 素 增 加 一 个 类 样式 ， 兼 容 非 正 
div.setAttribute("className", "title"): /为 div 元 素 增加 一 个 类 样式 ， 兼 容 下 
div.appendChild(txt): // 获 取 title 属性 值 ， 并 传递 给 div 元 素 


第 5 步 ， 为 超 链接 a 元 素 绑 定 鼠 标 指针 经 过 和 鼠标 指针 移出 的 事件 处 理 函 数 。 设 计 当 鼠标 指针 
移 过 超 链接 文本 时 ， 把 创建 的 div 元 素 节 点 增加 到 该 a 元 系 中 ， 而 当 鼠 标 指针 移出 超 链接 文本 时 ， 把 
a 元 素 中 增加 的 div 节点 删除 ， 代 码 如 下 。 


a.onmouseover = functiong{ /鼠标 指针 经 过 事件 处 理 函 数 
a.appendChild(div): /把 div 元 素 增加 到 a 元素 中 

} 

a.onmouseout = function(){ /鼠标 指针 移出 事件 处 理 函 数 
a.removeChild(div): // 把 a 元 素 中 的 div 元 素 删除 

} 


第 6 步 ， 定 义 妃 标 指针 移动 事件 处 理 函 数 ， 实 时 跟 踊 妃 标 指针 的 坐标 ， 并 利用 该 坐标 来 定位 创 
建 的 div 元 素 的 显示 位 置 ， 以 实现 它 始 终 显示 在 鼠标 指针 的 右 下 角 。 
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第 7 步 ， 在 CSS 样式 表 中 为 title 类 定义 类 样式 ， 代 码 如 下 。 





<style type="text/css"> 
.title {/* 提示 框 类 样式 */ 
padding:4px 8px: /# 增加 内 侧 补 白 */ 
border:solid 2px red: 诺 设计 边框 样式 */ 
background:blue;: /# 定义 背景 为 蓝 色 */ 
color:#fff: /# 定义 字体 为 白色 */ 
text-decoration:none: /# 清除 受 a 元素 影响 而 产生 的 下 划 线 */ 
} 
</style> 


至 此 ,整个 提示 框 效果 就 设计 完成 了 。 在 浏览 器 中 预览 ， 则 显示 效果 如 图 14.13 和 图 14.14 所 示 。 


汪 = EE http://localhost/m DOr BO 全 提 趟 框 ES EE http://localhost/m P 0 公 捍 示 杠 











图 14.13 ”指定 元 素 的 提示 框 演 示 效 果 (1) 图 14.14 ”指定 元 素 的 提示 框 演示 效果 (2) 

【示例 2】 示 例 1 仅 就 页 面 中 某 个 具体 的 超 链 接 来 定义 提示 框 ， 但 是 在 实际 设计 中 是 无 法 预测 到 
页 面 中 到 底 有 多 少 超 链 接 ， 为 此 需要 使 用 遍历 a 元 素 节 点 集合 技术 来 实现 动态 为 页 面 中 所 有 超 链 接 
设计 提示 框 ， 演 示 效 果 如 图 14.15 和 图 14.16 所 示 。 


人 http://localhost/m P ~ B © | localhost 人 hte://ocalhos/m DP ~ BC | Elocalhost 
\ 新 








S 
提 狐 首页 





14.15 ”为 页 面 中 所 有 超 链接 设计 提示 14.16 为 页 面 中 所 有 超 链接 设计 提示 
框 演示 效果 (1) 框 演示 效果 (2) 
实现 上 述 演示 效果 ， 本 示例 依然 采用 上 节 示 例 的 设计 思路 ， 只 不 过 中 间 增 加 了 for 循环 结构 来 遍 
历 文 档 中 所 有 的 超 链接 元 素 a。 
第 1 步 ， 复 制 test.html， 男 存 为 test2.html。 在 页 面 初始 化 事件 中 绑 定 一 个 事件 处 理 函 数 。 然 后 
获取 页 面 内 所 有 a 元素 的 引用 ， 代 码 如 下 。 
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window.onload = function(){ 
var a = document.getElementsByTagName("a"); // 创 建 div 元 素 节点 
4 


第 2 步 ， 在 该 事件 处 理 函 数 内 ， 完 成 上 节 示 例 的 操作 ， 代 码 如 下 。 





for(vari= 0: 1< alength: i ++ ){ // 遍 历 页 面 内 所 有 a 元 素 
tit = ali].getAttribute("title"): /获取 a 元 素 的 title 属性 值 
if(tit) ali].removeAttribute("title"): // 如 果 属 性 值 存在 ， 则 删除 该 属性 
var div = document.createElement("div"); // 创 建 div 元 素 节 点 
var txt = document.createTextNode(tif): /创建 并 把 提示 信息 赋予 文本 节点 
div.setAttribute("class", "title"); // 为 div 元 素 增加 类 属性 ， 兼 容 FF 
div.setAttribute("className", "title"); // 为 div 元 素 增加 类 属性 ， 兼 容 正 
div.style.position = "absolute"; // 绝 对 定位 div 元 素 
div.appendChild(txt); // 把 文本 节点 增加 到 div 元 素 

} 


第 3 步 , 设计 鼠标 指针 经 过 和 移出 的 事件 处 理 函 数 ， 以 实现 增加 和 删除 div 到 a 元素 。 考虑 到 在 函 
数 体 内 定义 团 包 是 无 法 与 外 界 进行 数据 交流 的 ， 为 此 主动 为 团 包 函数 传递 外 部 动态 参数 ， 代 人 码 如 下 。 


a[il.onmouseover = (function(i,div){ /鼠标 指针 经 过 时 的 事件 处 理 函 数 
return function(){ /返回 处 理 函 数 
al[il.appendChild(div): /为 a 元素 增加 div 元 素 
} 
})(1,div); // 为 团 包 函 数 传递 参数 ，i 表示 循环 变量 值 ，div 表示 引用 
af[il.onmouseout = (function(i,div){ // 鼠 标 指针 移出 时 的 事件 处 理 函 数 
return function(){ /返回 处 理 函 数 
al[il.removeChild(div); /为 a 元 素 移 出 div 元 素 
} 
站 (GdIV) 


第 4 步 ， 设 计 鼠 标 指针 移动 的 事件 处 理 函 数 。 为 了 能 够 兼容 不 同 主流 浏 贤 器 ， 以 及 考虑 浏览 絮 
窗口 可 能 会 出 现 深 动 条 ， 这 里 使 用 多 个 条 件 结构 进行 判断 来 设置 指针 的 坐标 值 ， 代 人 码 如 下 ， 读 者 需 
要 了 解 Event 对 象 的 属性 ， 详 细 内 容 可 以 参阅 上 一 章 讲 解 。 


af[i].onmousemove = (function(div,e){// 第 1 个 参数 表示 定位 元 素 ， 第 2 个 参数 表示 事件 参数 
return function(e) {// 闭 包 内 返回 函数 体 
Var posx = 0, posy = 0: // 定 义 两 个 局 部 变量 ， 用 来 存储 鼠标 指针 的 坐标 
// 判 断 当 前 浏览 器 ， 如 果 为 正 ， 则 使 用 window.event 获取 鼠标 指针 
if(e == null) e = window.event; 


// 判 断 是 否 支 持 pageX 或 pageY 事件 属性 ， 如 果 支 持 表示 浏览 器 支持 DOM 2.0 (如 FF 等 ) ， 此 时 
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可 以 使 用 这 两 个 属性 获取 鼠标 指针 在 窗口 中 的 坐标 
if(e.pageX || e.pageY)! 

posx = e.pageX; 

posy = e.pageY,; 





} 
else if(e.clientX || e.clientY){// 如 果 不 支 持 pageX 或 pageY， 则 使 用 clientX 或 clientY 
/如 果 支 持 document.documentElement.scrollTop 属性 ， 则 计算 指针 坐标 
if(document.documentElement.scrollTop){ 
posx = e.clientX + document.documentElement.scrollLeft: 
posy = e.clientY + document.documentElement.scrollTop:; 
}else{/ 否 则 使 用 传统 的 方法 来 计算 指针 的 坐标 位 置 
posx = e.clientX + document.body.scrollLeft: 
posy = e.clientY + document.body.scrollTop; 


} 
} 
div.style.top = (posy + 20) + "px"; // 把 鼠标 指针 的 y 坐标 作为 定位 值 赋予 div 
div.style.left = (posx + 10) + "px"; // 把 鼠标 指针 的 x 坐标 作为 定位 值 赋予 div 
} 
})(drv); 


窑 提示 : documentElement 在 DOM 2.0 中 表示 html 元 素 ， 因 此 要 获取 当前 页 面 的 滚动 条 纵 坐标 位 
置 ， 可 以 使 用 如 下 方法 。 


document.documentElement.scrollTop:; 
如 果 浏 览 器 不 支持 documentElement 对 和 象 ， 则 可 以 使 用 如 下 方法 获取 滚动 条 纵 坐 标 位 置 。 


document.body.scrollTop: 


这 里 的 body 对 象 表示 body 元 素 ， 而 document 表示 文档 对 象 ，scrollTop 属性 表示 滚动 条 的 纵 坐 
标 。 在 标准 W3C 下 ,document.body.scrollTop 始终 为 0, 需要 使 用 document.documentElement.scrollTop 
来 获取 滚动 条 坐标 。IE 浏览 器 从 5.5 版 本 开始 不 再 支持 document.body.scrollTop 和 document.body. 
scrollLeft 方法 ， 所 以 在 编程 中 一 般 使 用 上 面 方法 来 进行 判断 。 


14.6 在 线 练 习 


CSS 脚本 样式 练习 。 感 兴趣 的 读者 可 以 扫 码 练习 。 





. 497 。 


一 一 二 


大 是 





团购 类 型 网 站 的 布局 与 设计 


团购 网 就 是 团体 购买 的 网 络 组 织 平 台 ， 即 互 不 认识 的 消费 者 ， 借 助 互联 网 的 “网 聚 人 的 力量 ” 
来 聚集 资金 ， 加 大 与 商家 的 谈判 能 力 ， 以 求 用 最 优 的 价格 购买 商品 和 服务 。 根 据 薄 利多 销 、 量 大 价 
优 的 原理 ， 商 家 可 以 给 出 低 于 零售 价格 的 团购 折扣 和 单独 购买 得 不 到 的 优质 服务 。 在 2009 年 的 网 交 
会 上 ， 马 云 提出 了 “网 货 2.0” 的 概念 ， 即 消费 者 按 需 定制 、 厂 商 柔 性 生产 的 C2B 消费 模式 ， 如 今 团 
购 网 由 购买 者 集体 提出 条 件 与 商家 谈判 ， 由 商家 根据 购买 者 的 要 求 进行 生产 或 者 定价 的 运营 模式 ， 
正 是 体现 出 了 网 货 2.0 的 概念 ， 也 是 未 来 以 顾客 为 中 心 进行 网 络 营 销 的 恨 好 开端 。 

由 于 团购 市 场 的 兴起 和 逐渐 成 熟 ， 优 胜 劣 汰 ， 上 自然 而 然 就 会 产生 一 批 成 功 的 网 站 ， 比 较 出 名 的 有 
久久 团 (http://www.55tuan.com/， 如 图 15.1 所 示 )、 拉 手 网 (http://www.lashou.com， 如 图 15.2 所 示 )、 
24 券 (http:/www.24quan.com/)、 精 米 网 (http://www.nuomi.com)、 去 哪儿 团购 (http://tuan.qunar.com/) 
和 满座 网 (http://www.manzuo.com/) 等 。 
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图 15.1 窝 窝 团 图 15.2 拉手 网 


第 15 章 团购 类 型 网 站 的 市 局 与 设计 





15.1 产品 策划 


团购 类 型 的 网 站 结构 很 简单 ， 就 是 以 每 一 期 的 团购 内 容 为 单元 ， 内 容 包 括 团 购 的 标题 、 大 图 片 
展示 、 价 格 显示 和 相关 操作 。 所 以 也 就 不 用 考虑 太 多 页 和 面 的 逻辑 结构 问题 ， 只 要 把 每 期 的 团购 显示 
在 页 面 上 即 可 。 一 般 来 说 ， 团 购 类 型 的 网 站 多 采用 3 列 多 行 的 方式 布局 ， 如 图 15.3 所 示 ， 也 有 两 列 
多 行 的 方式 ， 如 图 15.4 所 示 。 


图 15.3 3 列 多 行 布局 图 15.4 2 列 多 行 布局 


与 其 他 团购 网 站 一 样 ， 美 团 网 具备 典型 的 团购 网 特点 。 除 了 页 眉 和 页 脚 ， 中 间 主 题 内 容 基 本 上 
也 是 分 为 3 栏 。 其 中 左边 和 中 间 的 一 栏 为 具体 团购 的 每 一 个 单元 ， 右 边 的 一 栏 为 团购 相关 单元 。 而 
每 一 个 团购 单元 里 面 标题 文字 都 会 设置 成 比较 大 的 字号 ， 而 完全 不 管 页 面 是 否 美观 。 最 重要 的 价格 
显示 区 都 会 设计 得 与 众 不同 且 比较 明显 。 

就 结构 布局 来 说 ， 团 购 网 这 一 类 型 的 网 站 是 做 得 非常 到 位 的 ， 即 使 页 面 可 以 拉 得 很 长 很 长 ， 但 
我 们 不 用 拉 滚 动 条 也 基本 上 能 猜 到 下 面 的 页 面 是 什么 内 容 ， 无 非 就 是 以 前 的 茶 期 团购 内 容 ， 越 往 下 
面 的 页 面 ， 时 间 也 越 靠 后 。 

说 到 美 团 网 的 配色 设计 方面 , 也 是 比较 出 色 的 。 首先 , 一 般 团 购 网 都 会 选择 暖色 调 作 为 主 色 ， 
但 美 团 网 却 选 了 蓝 色 和 绿色 ， 还 配 上 页 眉 页 脚 的 深 灰 色 。 再 者 ， 美 团 网 的 细节 也 是 做 得 非常 到 位 
的 。 我 们 看 看 网 站 的 logo 文字 “ 美 团 ”就 可 以 感受 到 ， 用 灰色 和 白色 就 可 以 做 出 好 像 水 唱 一 样 的 效 
果 ， 很 精致 耐看 。 还 有 网 站 的 背景 也 利用 起 来 ， 用 了 一 张 背 景 图 而 不 是 用 一 个 纯色 。 

其 实 设计 往往 是 赢 在 细节 上 ， 做 一 个 细节 ， 可 能 对 整体 没什么 影响 ， 做 两 个 细节 也 还 不 能 产生 
什么 影响 ， 但 当 所 有 细节 合 在 一 起 整体 看 时 ， 效 果 就 出 来 了 。 


1$.2 ”画板 和 设计 


根据 策划 的 基本 思路 ， 在 做 产品 设计 时 ， 美 团 网 在 准确 表达 团购 内 容 的 布局 基础 上 适当 设计 一 
些 个 性 的 表达 元 素 ， 整 个 网 站 包括 网 站 logo、 导 航 栏 、 每 期 的 团购 相关 信息 、 团 购 周 边 相 关 、 问 题 
反馈 、 版 权 信 息 等 版 块 内 容 ， 效 果 如 图 15.5 所 示 。 
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图 15.5 网 站 效果 图 
根据 这 些 模块 ， 初 步 在 稿 纸 上 男 出 页 面 布局 的 草图 ， 如 图 15.6 所 示 。 














图 15.6 设计 草图 


第 ]5 章 团购 类 型 网 站 的 布局 与 设计 $9 


通过 草图 对 将 要 制作 的 页 面 进 行 初步 分 析 ， 使 整个 页 面 大 体 有 一 个 轮廓 。 然 后 就 可 以 通过 画图 
软件 Photoshop 设计 效果 图 了 。 

第 1 步 ， 启 动 Photoshop， 新 建文 档 ， 设 置 文档 大 小 为 1002 像素 X1670 像素 ， 分辩 率 为 96 像素 
/英寸 ， 然 后 保存 为 “设计 图 psd”。 借 助 辅助 线 设计 出 网 站 的 基本 轮廓 ， 如 图 15.7 所 示 。 | 




















15.7 设置 辅助 线 


第 2 步 ， 在 Photoshop 中 新 建 “ 线 框图 ”图 层 ， 使 用 绘图 工具 绘制 页 面 的 基本 相框 和 背景 样式 ， 
如 图 15.8 所 示 。 








15.8 绘制 页 面 线 框 


aM 





第 3 步 ， 在 线 框 的 基础 上 进一步 细 化 栏目 形态 ， 明 确 栏目 样式 和 内 容 ， 特 别 是 重要 内 容 的 显示 


形式 ， 效 果 如 图 15.9 所 示 。 
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恨 售 28 元 | 原 的 298 元 的 天 外 宝 宝 早 区 中 恨 告 38 元 | 茸 访 从 优 410 元 内 庆 力 恬 KTV 到 
位 4 同年 大 项 但 旺 策 玄 加 诗 筑 
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B 区 : 团购 的 相关 资讯 C 区 : 团购 周边 信息 


避 信 56 元 | 诛 前 198 克 的 万 宁 重 折 问 击 丙 慨 介 #9 元 | 不 他 16.5 克 的 视 环 笃 色 可 五 
售后 3 人 麻 咎 划 乌 感到 全 枉法 第 性 1 双 


图 15.9 版 块 划分 图 


15.3” 切 图 和 输出 


上 和 面 的 工作 完成 之 后 ， 接 下 来 就 是 切 图 了 。 切 图 的 目的 是 要 找 出 设计 图 中 有 用 的 区 域 ， 包 括 使 
用 CSS 无 法 实现 的 效果 ， 以 及 可 以 重复 显示 的 效果 。 限 于 篇 幅 ， 这 里 只 讲解 部 分 设计 图 。 

纵 观 全 图 ， 看 看 哪些 是 要 切 下 来 做 图 片 或 背景 的 ， 做 背景 要 怎么 切 ， 等 等 。 做 到 心里 有 数 ， 然 
后 就 可 以 切 图 了 。 

首先 是 网 站 的 logo 和 网 站 头 部 的 背景 ， 网 站 的 logo 还 包括 其 域名 。 广 告 词 放 到 一 张 图 里 面 切 
割 下 来 ， 而 背景 图 后 期 可 以 通过 CSS 样式 设置 其 水 平平 铺 显 示 ， 所 以 这 里 只 要 切割 一 小 截 即 可 ， 
如 图 15.10 所 示 。 
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今日 团购 往 期 团购 玩 竺 去 团 惠 见 问世 
图 1$.10 ”切割 网 站 logo 和 背景 图 


下 面 是 网 站 的 某 一 期 的 团购 单元 价格 显示 和 对 其 相关 的 操作 区 域 ， 价 格 是 后 台数 据 显 示 的 ， 而 
后 面 的 “去 看 看 ”按钮 则 连同 五 边 形 一 起 作为 一 张 图 片 切割 下 来 ， 如 图 15.11 所 示 。 
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图 15.11 切割 页 面 的 背景 图 


其 实 ,“ 去 看 看 ”只 是 其 中 一 张 图 片 ， 根 据 网 站 的 需要 ,我 们 还 要 设计 几 张 类 似 图 片 ， 如 图 15.12 
所 示 ， 然 后 逐 张 切割 下 来 。 





图 15.12 ”其 他 相关 的 切割 图 片 
为 了 方便 图 片 的 管理 和 加 载 ， 这 里 把 所 有 图 片 〈 重 复 利 用 的 ) 都 整合 到 一 张 背 景 透明 的 大 图 上 ， 
效果 如 图 15.13 所 示 。 
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图 1$.13 ”切割 的 图 片 整合 到 一 张 PNG 大 图 上 
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Csssion nm 页 样式 与 布局 从 入 门 到 精通 ( 微 梨 精 编 版 ) 





其 他 边框 都 是 简单 的 单 色相 框 ， 效 果 都 可 以 通过 CSS 实现 ， 没 有 必要 进行 切割 。 
最 后 ， 把 图 片 存储 为 Web 和 设备 了 所 用 格式 。 打 开 存 储 图 片 的 文件 夹 (一般 以 images 命名 )， 就 
可 以 看 到 网 站 所 需要 的 背景 图 像 ， 如 图 15.14 所 示 。 根 据 需 要 对 其 重 命名 即 可 。 
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图 15.14 切 图 效果 
15.4 网 站 重 构 


第 1 步 ， 根据 设 计 版 块 划分 图 的 区 域 进行 划分 ， 局 动 Dreamweaver， 选 择 “ 文 件 ” 一 “新 建 ” 命 
令 ， 弹 出 “新 建文 档 ” 对 话 框 。 新 建立 一 个 空白 的 HTML 文档 页 面 ， 并 保存 文件 为 mdex.html。 

第 2 步 ， 编 写 HIML 基本 结构 。 在 编写 结构 时 ， 读 者 应 该 注意 结构 的 敬 套 关系 ， 以 及 每 级 结构 
的 类 名 和 了 D 编号 ， 详 细 代码 如 下 。 


<ldoctype html> 
<html> 
<head> 
<title> 美 团 网 </title> 
<meta charset="utf-8"> 
</head> 
<body class="bg-alt"> 
<div 1d="doc" > 
<div 1d="hdw" > 
<div 1d="hd" ></div> 
</div> 
<!-- 导 航 居中 --> 


.504 。 
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€ A (ssstDN0 网 页 样 并 与 布局 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


</div> <!-- ft end --> 
</div> <!-- ftw end --> 


: </div> <!-- docend--> 





第 3 步 ， 简 化 代码 ， 以 便 可 以 更 清晰 地 看 到 整个 网 站 的 总 体 结构 ， 这 样 到 后 面 做 网 站 布局 的 时 
候 我 们 才能 做 到 心中 有 数 。 如 图 15.15 所 示 为 几 个 主要 模块 的 包含 框 。 
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图 15.15 几 个 主要 层 的 包含 标签 
155 网 站 布局 


通过 上 面 的 网 站 重 构 ， 我 们 可 以 大 致 了 解 网 站 的 总 体 结 构 ， 下 面 就 一 步 步 实现 整个 网 站 。 
启动 Dreamweaver 软件 ， 打 开 上 一 节 中 重 构 的 网 页 结构 文档 index.htm， 然 后 逐步 添加 页 面 的 微 
结构 和 图 文 信 息 ， 主 要 包括 段落 、 列 表 、 标 题 ， 以 及 必要 的 文本 和 图 像 内 容 ， 对 于 需要 后 台 上 自动 生 


se 
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成 的 内 容 ， 可 以 填充 简单 的 图 文 ， 以 方便 在 设计 时 预览 和 测试 。 

选择 “文件 ”一 “新 建 ” 命 令 , 创建 外 部 CSS 样式 表 文 件 , 保存 为 style.css 文件 , 并 存储 在 images 
文件 夹 中 。 然 后 选择 “窗口 ”一 “CSS 样式 ”菜单 命令 ， 打 开 “CSS 样式 ”面板 ， 单 击 “ 附 加 样式 
表 ” 按 钮 ， 在 弹出 的 “链接 外 部 样式 表 ” 对 话 框 中 ， 单 击 “ 浏 览 ” 按 钮 ， 找 到 style.css 文件 ， 将 其 链 
接 到 index.htm 文档 中 ， 最 后 单 击 “ 确 定 ” 按 钮 ， 如 图 15.16 所 示 。 





CSS 样 式 链接 外 部 样式 表 





闷 件 /URL (F): 
添加 为 : “链接 (L) 
四 导入 上 ) 
霸 体 侧 ): 
您 也 可 以 输入 逗号 分 隔 的 媒体 类 型 列表 。 











Dreamweaver 的 范 倒 样 式 表 可 以 帮助 您 起 步 。 


图 15.16 链接 外 部 样式 表 
在 “代码 ”视图 下 ， 可 以 看 到 Dreamweaver 自动 生成 的 代码 : 
<link rel=stylesheet type=text/css hre 仁 "images/style.css" media=all> 


第 2 步 ， 初 始 化 标签 样式 。 
将 所 有 要 用 到 以 及 即将 用 到 的 元 对 初始 化 ， 确 保 毛 有 元 素 在 不 同 浏览 器 下 默认 状态 是 一 致 的 ， 
代码 如 下 。 有 具体 代码 请 查看 style.css 文件 头 部 初始 化 。 

html {fpaddimng:0px:marglin:OpX: } 

body {padding:0px:; margimn:Opx: } 

div {padding:0px; margin:0px; } 
p {padding:O0px; margin:0px; } 

hl {padding:0px; margin:0px; } 

ol {padding:0px; margin:0px; } 
ul {padding:0px; margin:0px; } 

li {padding:0px; margin:0px; } 


第 3 步 ， 分 析 A 区 的 网 站 顶部 <div class="hdw"> 的 结构 和 样式 。 

该 区 域 最 外 面 的 包含 框 为 <div i1d="hdw">, 设置 层 本 身 和 里 面 的 内 容 均 水 平 居 中 , 高 为 157 像素 ， 
背景 水 平平 铺 ,一 直到 浏览 器 的 边缘 。 里面 再 写 一 个 层 <div 1d="hd">， 宽 为 960 像素 。 设 置 其 堆 登 顺 
序 为 2， 保 证 在 页 面 的 前 面 ， 相 对 定位 ， 为 后 面 的 绝对 定位 做 准备 。 这 里 要 重点 分 析 的 是 <a 
class="logo"> 连 接 标 签 ， 它 以 块 状 的 方式 显示 ， 宽 为 263 像素 ， 高 为 57 像素 。“ 美 团 网 ” 这 3 个 字 
缩 进 -9999 像素 。 这 样 在 页 面 上 是 没 办 法 看 到 的 ， 实 际 上 相当 于 把 它 隐 藏 起 来 。 最 重要 的 是 设置 背景 


“0 








(sss+DI0 网 页 样式 与 布局 从 入 门 到 精通 【 答 旬 精 编 版 ) 


图 为 logo 的 图 片 ， 也 就 是 说 网 站 的 logo 是 以 背景 而 不 是 图 片 的 形式 显示 的 。 
| “切换 城市 ”最 外 和 面 的 包含 层 为 <div class="guides">,， 设置 其 堆 靶 顺序 为 4， 也 就 是 说 显示 在 <div 
id="hd"> 层 的 上 面 ， 设 置 其 绝对 定位 ， 并 设置 其 定位 的 坐标 值 。 里 面 再 写 一 个 层 <div class="city">， 
| 同样 为 绝对 定位 。 里 面 写 一 个 <h2>， 设 置 字体 为 16 像素 ， 颜 色 为 白色 。 而 “切换 城市 ” 则 写 在 <em> 
标签 里 面 ， 以 块 状 的 方式 显示 ， 设 置 字体 大 小 为 12 像素 ， 并 设置 其 颜色 。 分 析 如 图 15.17 所 示 。 


八 ote 
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仪 售 298 元 | 原价 1022 元 的 内 好 
温泉 2 日 1 夜 双人 游 套餐 






人 
层 <div class="subscribe" 仿 则 放 右 边 的 内 容 。 网 站 导 
航 等 写 在 <div> 里 面 ， 并 设置 相关 样式 。 








图 15.17 <div class="hdw"> 的 结构 和 样式 


具体 结构 代码 如 下 。 


<div 1d=hdw style="margin:0 auto; text-align:center;"> 
<div 1d=hd style="text-align:left:" > 
<div id=logo><a class=logo> 美 团 网 </a></div> 
<div class=guldes> 
<div class=city> 
<h2 id=header-city class=fold> 深 圳 <em><a>[ 切 换 城 市 ]</a></em> </h2> 
</div> 
</div> 
<div 1d=header-subscribe-body class=subscribe></div> 
<!-- 放 网 站 右边 的 内 容 --> 
<div 1d=header-subscribe-auto class=email-auto></div> 
<!-- 放 选择 邮件 的 下 拉 框 --> 
<div style="margin:0 auto; text-align:center; wldth:960px: clear:both:;"></div> 
</div> 
<!-- 网 站 导航 及 相关 --> 
</div> 


下 和 面 是 相关 的 样式 代码 。 


#hdw { background: url(background.png) repeat-x; helght: 157px } 
/# 背 景 图 片 水 平平 铺 ， 一 直 平 铺 到 浏览 器 的 边缘 ， 高 为 157 像素 */ 
#hd { z-index: 2:; position: relative; margin: Opx auto; width: 960px } 


“00 
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/# 扒 琶 顺 序 为 2， 相 对 定位 ， 在 页 面 中 水 平 居 中 ， 宽 为 960 像素 */ 

#logo { padding-left: 20px: padding-top: 23px } 

#logo .logo { text-indent: -9999px: outline-style: none:; width: 263px; display: block: background: url(background.png) 会 施 
#000 no-repeat Opx -160px: height: 57px } 

/# 文 字 缩 进 -9999 像素 ， 相 当 于 把 文字 在 页 面 上 隐藏 起 来 ， 以 块 状 的 方式 显示 ， 背 景 图 不 重复 ， 同 时 设置 
背景 颜色 为 黑色 ， 并 设置 背景 图 显示 的 位 置 */ | 

#hd .guldes { z-index: 4:; position: absolute: top: 39px: left: 30Spx } 

#hd .clty { position: absolute; width: 120px; top: Opx; left: Opx } 

#hd .city h2 { color: #fff: font-size: 16px } 





#hd .city em { outline-style: none: display: block: color: #399: font-slze: 12px } 


第 4 步 ， 编 写 网 站 A 区 右边 <div class="subscribe"> 层 的 代码 。 

A 区 右边 <div class="subscribe"> 层 最 外 面 的 包含 层 为 <div class="subscribe" id='"header-subscribe- 
body">， 宽 为 240 像素 ， 高 为 100 像素 。 绝 对 定位 ， 其 离 母 层 项 上 边缘 为 16 像素 ， 离 右边 缘 为 20 
像素 。 里 面 分 为 3 个 层 : 第 1 个 层 为 <div class="byemail">， 宽 为 240 像素 ， 高 为 24 像素 。 洲 出 来 的 
隐藏 ， 相 对 定位 ， 设 置 一 张 背 景 图 片 。 里 面 放 一 个 文本 域 和 一 个 按钮 控件 ， 并 设置 它们 的 相关 样式 。 
第 2 个 层 为 <div class='"followus">， 设 置 宽度 和 高 度 ， 同 样 相 对 定位 “关注 我 们 ” 写 在 <h3> 里 面 ， 
设置 字体 为 12 像素 。 紧 跟着 后 面 写 一 个 <ul >， 绝 对 定位 。 里 面 再 写 3 个 子 标签 <li>， 里 和 面 分 别 写 一 
个 <span> 标 签 ， 以 块 状 的 方式 显示 ， 宽 为 20 像素 ， 高 为 19 像素 ， 洲 出 来 的 隐藏 。 连 接 一 张 背 景 图 ， 
也 就 是 我 们 看 到 的 3 个 图 标 。 至 于 里 和 面 的 文字 则 通过 设置 缩 进 -9999 像素 ， 把 其 隐藏 起 来 。 最 后 在 它 
们 外 面 都 写 一 个 <a> 标 签 ， 以 便 可 以 做 超 链接 ， 连 接 到 其 他 页 面 。 第 3 个 层 为 <div class="bysms">， 
设置 字体 的 颜色 值 为 #399。 里 面 写 上 3 个 <span> 标 签 ， 放 入 相关 的 文字 ， 设 置 内 外 边 距 等 相关 样式 
即 可 ， 最 后 效果 如 图 15.18 所 示 。 







输入 Email ;WJ 阅 每 日 团购 


关注 我 们 5 局 


霹 局 


这 里 <div ass-"subscribe"> 为 最 外 面 的 包含 框 ， 绝 


| 









站 扩 请 好 友 购 买 返 10 元 容 。<div class="bysms"> 则 放 第 3 行内 容 , 并 设置 鼠 
WS 标的 显示 方式 。 


图 15.18 ”<div class="subscribe"> 层 的 代码 


结构 代码 如 下 。 


<div class=subscribe> 
<form 1d=12 action=""> 
<div class=byemall> 
<Input 1d=11 class=f-text> 


* 509。 





(Csss+pyty 网 页 拌 交 与 布局 从 入 门 到 精通 ( 微 课 精 编 版 ) 


<Input class=commit type=submit> 
</div> 
<- 站 内 导航 相关 控件 -> 
<div class=followus style="width:180px; height:26px:"> 
<h3> 关 注 我 们 </h3> 
<ul> 
<]i><a><span class=s> 美 团 深圳 的 新 浪 微 博 </span></a> </li> 
<]i><a><span class=q> 美 团 的 腾讯 微 博 </span></a> </li> 
<]i><a><span class=k> 美 团 的 开心 主页 </span></a> </li> 
</ul> 
</div> 





<div class=bysms> <span class=sms>»》 免费 短信 订阅 </span> <span class=slash></span> <span 
class=sms> 退 订 </span> </div> 
</form> 


</div> 
下 面 是 相应 的 样式 代码 。 


#hd .subscribe { position: absolute; width: 240px; height: 100px:; font-slze: 12px: top: 16px: right: 20px } 

/# 最 外 面 的 包含 层 : 绝对 定位 ， 字 体 大 小 为 12 像素 */ 

#hd .byemall { position: relative; width: 240px: background: url(background.png) Opx -270px:; height: 24px; 
overflow: hidden }/* 相 对 定位 ， 背 景 图 片 不 重复 ， 里 面 的 内 容 洲 出 来 隐藏 */ 

#hd .byemall .f-text { padding: Opx Spx; line-height: 22px; border-width: Opx; margin: Opx:; width: 170px; 
background: none transparent scroll repeat 0% 0%: height: 24px; color: #999: font-size: 12pX: } 

/# 行 高 为 22 像素， 边框 宽度 为 0 像素 ， 没 有 背景 图 片 ， 背 景 本 身 透明 无 颜色 ， 背 景 图 片 随 浏览 器 下 拉 而 滚 
动 ， 背 景 图 片 重复 等 ， 里 面 字体 大 小 为 12 像素 */ 

#hd .byemall .commit { position: absolute; border-style: none: line-height: 24px; margln: Opx; width: 60px: 
display: block: background: none transparent scroll repeat 0% 0%: height: 20px; color: #fff: top: Opx: cursor: pointer; 
right: Opx: font-weight: 700: height: 24px; padding: 2pxX000} 

上 # 绝 对 定位 ， 没 有 边框 的 样式 ， 行 高 为 24 像素 ， 以 块 状 的 方式 显示 ， 没 有 背景 图 片 ， 背 景 本 身 透 明 无 颜 
色 ， 背 景 图 片 随 浏览 器 下 拉 而 滚动 ， 背 景 图 片 重复 等 ， 鼠 标 指针 以 手 形 的 方式 显示 开 

上 面 是 第 1 个 层 的 相关 样式 。 下 面 是 第 2 个 层 的 相关 样式 。 

#hd .followus { position: relative; padding: 3px; margin: 6px Opx 3px:; width: 158px:; background: #333:; height: 
19px; -moz-border-radius: 3px:; -webkit-border-radius: 3px: box-shadow: lpx lpx 0 #444 } 

旋 相 对 定位 ， 兼 容 不 同 的 浏览 器 ， 投 影 : x 轴 位 移 1 像素 ，y 轴 位 移 1 像素 ， 阴 影 大 小 为 0， 没 有 扩展 ， 颜 
色 为 #444( 注 : 这 是 CSS3 里 面 的 样式 ) */ 

#hd .followus ul { position: absolute: top: 3px; left: 68px } 

#hd .followus li { float: left: margin-right: 10px } 


-i 
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#hd .followus span { text-indent: -9999px: width: 20px: display: block: background: url(background.png) -240px 
-270px: height: 19px: overflow: hidden; cursor: pointer } 

尺 里 面 的 文字 缩 进 -9999 像素 ， 以 块 状 的 方式 显示 ， 连 接 一 张 背 景 图 片 ， 洲 出 来 的 隐藏 交 

#hd .followus span.q { background-position: -260px -270px } 

#hd .followus span.k { background-position: -280px -270px } 

#hd .followus h3 { position: absolute; color: #ccc; font-slze: 12px; top: 3px; font-weight: 400: left: 8px } 


下 面 是 第 3 个 层 的 相关 样式 。 


#hd .bysms { color: #399; cursor: pointer } 
#hd .bysms .slash {color: #666:; padding: Opx 7px Opx Spx ;} 


第 5 步 ， 分析 B 区 <div class="item"> 框 体 的 结构 和 样式 代码 。 

从 效果 图 可 以 看 到 ， 其 实 整个 页 面 的 主体 内 容 就 是 由 这 样 的 一 个 一 个 具体 团购 单元 组 合 起 来 的 ， 
只 要 分 析 完 一 个 ， 其 他 的 基本 上 都 一 样 。 

这 里 最 外 面 的 包含 框 为 <div class="item">， 宽 度 为 336 像 系 ,边框 是 颜色 值 为 #89b4d4 的 1 像素 
实 线 。 上 外 边 距 25 像素 ， 背 景 颜 色 为 白色 ， 最 重要 的 设 为 问 左 浮动 。 这 样 这 些 团购 单元 就 会 一 个 换 
一 个 地 在 页 面 上 排列 起 来 。 里 面具 体 分 3 个 层 : 第 1 个 层 为 这 里 的 标题 ，<h1> 高 为 60 像素 ， 上 、 碳 、 
下 、 左 内 边 距 分 别 为 15 像素 、16 像素 、10 像素 和 16 像素 。 里 面 字体 大 小 为 16 像素 ， 颜 色 为 黑色 ， 
居 左 显示 。 第 2 个 层 为 <div class="cover">， 相 对 定位 。 里 面 放 这 个 模块 的 大 图 片 。 第 3 个 层 为 <div 
class="inner">， 里 面 分 4 个 层 来 完成 布局 ， 相 对 比较 复杂 ， 我 们 将 在 下 一 步 进行 分 析 。B 区 框 体 结构 
如 图 15.19 所 示 。 





仅 售 1 元 ! 价值 20 元 的 天 


浮动。 背景 颜色 为 白色 。 里 面 再 分 3 个 层 : <h1> 
放 这 里 的 标题 ， 字 体 颜 色 为 黑色 并 加 粗 。<div 
class="cover"> 则 放 这 里 的 大 图 片 。 





第 3 个 层 为 <div class="inner">， 里 面 分 4 个 层 来 
完成 这 里 的 布局 。 
1 天 1 小 时 21 分 钟 7 天 





图 1$.19 B 区 <div class="item"> 框 体 结构 


具体 结构 代码 如 下 。 


“lls 
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<div class=ltem> 
<hl><a></a></h1> 
<!-- 标 题 --> 
<div class=coveI><a><lmg src=""></a> </div> 
<!-- 大 图 片 -> 
<div class=1nner></div> 


</div> 


下 面 是 相关 的 样式 代码 。 


#1index-deals .secondary .item { border: #89b4d4 lpx solid; width: 336px; margin-bottom: 25px; background: #fff:; 
float: left; } 

尺 边框 是 颜色 为 #89b4d4 的 1 像素 实 线 ， 宽 为 336 像素 ， 背 景 颜色 为 白色 ， 问 左 浮动 */ 

#1index-deals .secondary hl { text-align:left:; paddimg:1Spx 16px 10px 16px: height: 60px; font-size: 16px; } 

/# 字 体 16 像素 ， 居 左 对 齐 ， 上 、 右 、 下 、 左 内 边 距 分 别 为 15 像素 、16 像素 、10 像素 和 16 像素 */ 

#1index-deals .secondary hl a { color: #000 } 

#index-deals .secondary hl a:hover { color: #399 } 

#index-deals .secondary .cover { position: relative } 


第 6 步 ， 分 析 <div class="inner"> 的 框 体 结构 。 

接 厦 上 一 步 对 第 3 个 层 <div class="inner"> 进 行 分 析 。 前 面 也 说 过 ， 这 里 面 还 分 4 个 层 ， 其 中 难 
点 便 是 第 1 个 层 <div class="deal-buy">。 从 效果 图 看 到 ,“ 去 看 看 ”这 一 图 片 是 超出 整个 单元 最 外 面 
的 包含 层 <div class="item"> 的 ， 到 底 是 怎么 实现 的 呢 ? 

先 设置 层 <div class="deal-buy"> 为 相对 定位 ， 里 面 再 写 1 个 层 <div class="deal-price-tag-open">， 
设置 宽 为 237 像素 ， 高 为 76 像素 ， 为 绝对 定位 ， 其 离 母 层 <div class="deal-buy"> 左 边缘 为 -27 像素 ， 
而 左 内 边 距 为 50 像素 。 为 了 保证 层 本 喘 在 页 面 的 前 面 ， 设 堆 有 登 顺序 为 1。 这样 ， 最 后 设置 一 张 背 景 
图 ， 即 可 得 到 背景 图 跑 出 外 面 的 效果 。 总 的 来 说 这 里 是 通过 两 步 来 完成 这 样 的 效果 的 : 先 用 绝对 定 
位 把 层 写 到 母 层 的 包含 框 外 面 ， 然 后 用 堆 登 顺序 保证 这 个 层 在 母 层 的 上 面 。 

通过 上 一 步 ， 背 景 图 就 设置 好 了 了， 然后 就 是 安排 里 面 的 内 容 了 。 这 里 先 写 一 个 <p 
class="deal-price">， 宽 为 100 像素 ， 高 和 行 高 为 64 像素 ， 而 左 内 边 距 为 35 像素 。 同 样 设置 绝对 定 
位 。 其 离 母 层 左 边缘 为 -24 像素 ， 设 置 堆 登 顺序 为 2， 这 样 就 会 在 层 <div class="deal-price-tag-open"> 
的 上 和 面 。 这 样 内 容 的 层 也 做 好 了 。 人 至 于 里 面 的 价格 数值 就 写 在 <strong> 里 面 。 设置 左 浮动 ， 字 体 为 白 
色 ， 大 小 为 22 像素 。 

而 我 们 知道 “去 看 看 ”这 几 个 字 其 实 是 一 张 背 景 图 ， 那 怎么 写 代 码 才 会 让 其 只 要 被 点 击 就 会 产 
生 相应 操作 的 效果 呢 ? 先 写 一 个 <span> 标 签 ， 同 样 用 绝对 定位 设置 这 个 标签 的 位 置 。 里 面 再 写 一 个 
<a> 连 接 标 签 ， 以 块 状 的 方式 显示 。 宽 为 97 像素 ， 高 为 41 像素 。 上 外 边 距 为 12 像素 。 这 样 当 鼠标 
指针 移 到 背景 图 “去 看 看 ”这 一 区 域 周围 时 ， 便 可 做 相应 的 操作 了 。 

第 2 个 层 为 <table class="discount">， 里 面 分 3 行 6 个 单元 格 ， 写 上 相关 样式 即 可 。 


a 
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第 3 个 层 为 <div class="deal-box deal-timeleft deal-on">， 设 为 左 浮动 ， 里 面 写 一 个 <ul>， 其 子 标 
签 <li> 以 行内 的 方式 显示 ， 这 样 便 可 以 让 里 面 的 内 容 在 一 条 线 上 显示 了 。 | ; 
第 4 个 层 为 <div class="deal-box deal-status deal-status-open">, 同样 设 为 左 浮动 , 设置 内 外 边 距 等 ， 
相关 样式 ， 最 后 如 图 15.20 所 示 。 Er 
和 /0 





维 秋 顺序 为 1, 这样 为 后面 设置 背景 图 做 好 准备 条 
于 里 面 的 价格 数字 则 写 在 <p class="deal- 
匣 ， 设 堆 香 顺序 为 2 即 可 。 








图 15.20 ”<div class="inner"> 的 框 体 结构 


结构 代码 如 下 。 


<div class=InneT> 
<div class=deal-buy> 
<div class=deal-price-tag-open></div> 
<p class=deal-price><strong></strong> <span><a></a></span> </p> 
</div> 
<table class=discount> 
<tr>< 了 h> 现 价 </th><td class=price><strong></strong></td></tr> 
<tr>< 了 b> 原价 </th><td><del><strong></strong></del></td> </tr> 
<tr><th> 折 扣 </th> <td><strong></strong></td></tr> 
</table> 
<div class="deal-box deal-timeleft deal-on"> 
<ul> 
<li><span></span></li> 
</ul> 
</div> 
<div class="deal-box deal-status deal-status-open"> 
<p class=deal-buy-tip-top><strong>6502</strong> 人 已 购买 </p> 
</div> 
</div> 


下 面 是 一 部 分 样式 代码 。 
第 1 个 层 <div class="deal-buy"> 的 样式 代码 如 下 。 


“2 
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.ltem .Inner { text-allgn:left; } 
#1index-deals .secondary .deal-buy { position: relative } 
#1index-deals .secondary .deal-price-tag-open { text-align:left: z-index: 1:; position: absolute; padding-left: $0Opx: 
width: 237px: background: url(bg-deal-see-s.png) no-repeat Opx 0px: height: 76px: left: -27px: } 
/# 扒 释 顺 序 为 1， 绝 对 定位 ， 左 内 边 距 为 50 像素 ， 宽 为 237 像素 ， 背 景 图 不 重复 */ 
#1index-deals .secondary .deal-price { z-index: 2; position: absolute: line-height: 64px: padding-left: 3Spx:; width: 
100px; height: 64px: left: -24px } 
/# 扒 登 顺序 为 2， 绝对 定位 ， 行 高 和 高 为 64 像素 ， 左 内 边 距 为 35 像素 ， 离 母 层 左 边 -24 像素 */ 
#1index-deals .secondary .deal-price strong { float: left; color: #fff: margin-left: Spx; font-size: 22px; font-weight: 





normal } 
/# 左 浮动 ， 字 体 颜色 为 白色 ， 大 小 为 22 像素 ， 左 外 边 距 为 5 像素 */ 
#1index-deals .secondary .deal-price span { z-index: 2; position: absolute: color: #fff: top: Opx: left: 113px } 
#1index-deals .secondary .deal-price span a { line-height: 41px; margin-top: 12px; outline-width: Opx; width: 97px:; 
display: block: height: 41px } 
记 行 高 和 高 都 为 41 像素 ， 外 上 边 距 为 12 像素 ， 以 块 状 的 方式 显示 */ 


以 下 为 第 2 个 层 <table class="discount"> 的 样式 代码 。 


#index-deals .secondary .discount { margin: Opx Opx 10px 20Spx; width: 120px; color: #333; font-size: 14px }/* 
上 、 右 、 下 、 左 外 边 距 分 别 为 0 像素 、0 像素 、10 像素 和 205 像素 ， 宽 为 120 像素 */ 

#1index-deals .secondary .discount th { text-align: left: padding: Opx: } 

#index-deals .secondary .discount td { text-align: left:; padding: Opx; } 

#1index-deals .secondary .discount th { width: 40px: font-weight: normal } 

#1index-deals .secondary .discount td { width: auto } 

#1index-deals .secondary .discount .price { color: #c33 } 


以 下 为 第 3 个 层 <div class="deal-box deal-timeleft deal-on"> 的 样式 代码 。 


#index-deals .secondary .deal-timeleft { text-align: right: width: 184px: padding-right: 0px: float: left: height: 
22px; color: #333 } 

#1index-deals .deal-timeleft ul { display: inline } 

#1index-deals .deal-timeleft li { display: inline } 

#1index-deals .deal-timeleft li span { padding: Opx 2px: font-weight: bold: } 


以 下 为 第 4 个 层 <div class="deal-box deal-status deal-status-open"> 的 样式 代码 。 


#index-deals .secondary .deal-status { padding: 8px: width: 120px: float: left; color: #000:; margin-left: 5px:; }/* 内 
边 距 为 8 像素 ， 宽 为 120 像素 ， 左 浮动 ， 左 外 边 距 为 5 像素 */ 

#1index-deals .secondary .deal-buy-tip-top { line-height: 1: font-size: 14px: font-weight: normal } 

#deal-intro .deal-buy-tip-top strong { color: #c33 } 


.514 。 
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第 7 步 ， 编 写 C 区 <div class="sidebox commitment"> 的 结构 和 样式 。 

这 里 最 外 面 的 包含 框 为 <div class="sidebox commitment">， 边 框 是 其 色 为 #89b4d6 的 2 像素 的 实 
线 ， 并 且 下 外 边 距 为 16 像素 。 标 题 “ 美 团 承诺 团购 无 忧 ” 写 在 <h3> 里 面 ， 行 高 和 高 为 32 像素 ， 这 
样 可 以 垂直 居中 。 底 边框 为 1 像素 的 白色 实 线 。 上 、 右 、 下 、 左 4 个 边 的 内 边 距 分 别 为 12 像素 、12 
像素 、0 像素 和 12 像素 。 

<div class="sideinner"> 则 负责 放 这 一 模块 里 面 的 内 容 。 最 小 高 度 为 48 像素 ， 高 度 设 为 自 适应 ， 
这 样 可 以 保证 本 层 就 算 没 有 内 容 也 有 48 像素 的 高 度 。 同 时 ， 上 、 右 、 下 、 左 4 个 边 的 内 边 距 分 别 为 
12 像素 、12 像素 、0 像素 和 12 像素 。 而 上 边框 为 1 像素 的 实 线 。 里 面 先 写 一 个 <ulj>， 设 置 一 张 背 景 
图 ， 即 从 效果 图 看 到 的 有 个 “ 信 ” 字 的 图 标 。 左 内 边 距 为 60 像素 ， 这样 文字 便 会 显示 在 图 标的 右边 。 
后 面 的 3 行文 字 分 别 写 在 3 个 子 标签 <li> 里 面 。 

至 于 “得 看 详情 ”要 写 在 <p> 里 面 ， 设 置 居 右 对 齐 ， 文 字 便 在 右边 显示 ， 效 果 如 图 15.21 所 示 。 








美 团 革 市 团购 无 忧 _ 


<div class="sidebox commitment"> 为 最 


面 的 包含 层 ， 边 框 为 2 像素 的 实 线 。 标 
题写 在 <h3> 里 面 ，14 像 素 并 加 粗 。<div 
dnp i 到 Class="sideinner"> 最 小 高 度 为 48 像 素 。 里 
面 的 <ul> 设 置 一 张 背 景 图 ， 左 内 边 距 为 

50 像 素 。<p> 的 文字 居 右 对 齐 。 





图 15.21 <div class="sidebox commitment"> 的 结构 
下 面 是 这 个 区 域 总 体 框架 的 结构 代码 。 


<div class="sidebox commitment"> 
<h3> 美 团 承 诺 &nbsp; 团 购 无 忧 </h3> 
<div class=sideinner> 
<ul> 
<li></l1> 
<!-- 放 3 行文 字 --> 
</ul> 
<p><a> 查 看 详情 </a></p> 
</div> 
</div> 


具体 样式 代码 如 下 。 


ls 
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#sidebar .sidebox { border: #89b4d6 2px solid: padding-bottom: 12px; background-color: #eff8ff: margin-bottom: 
16px; } 

旋 边 框 是 颜色 为 #89b4d6 的 2 像素 的 实 线 ， 下 内 边 距 为 12 像素 ， 下 外 边 距 为 16 像素 */ 

#sidebar .sidebox h3 { border-bottom: #fff lpx solid; padding: Opx 12px; line-height: 32px; background: #eee; 
height: 32px; font-size: 14px; padding-top: 2px } 

/# 底 边框 为 1 像素 的 白色 实 线 ， 行 高 和 高 为 32 像素 ， 字 体 大 小 为 14 像素 */ 

#sidebar .sideinner { padding:12px 12px 0px 12px: min-height: 48px: height: auto !i1mportant; border-top: #eaecec 
lpx solid: } 

#sidebar .commitment ul { padding-left: 60px: background: url(background.png) no-repeat Opx -460px: font-size: 
12px }/* 左 内 边 距 为 60 像素 ， 背 景 图 片 不 重复 ， 字 体 大 小 为 12 像素 */ 

#sidebar .commitment p { text-align: right; padding:6px Opx Opx Opx; font-size: 12px; } 


上 面 分 析 的 是 C 区 其 中 一 个 栏目 的 结构 和 样式 代码 ，C 区 中 其 他 的 栏目 也 可 以 以 此 类 推 ， 篇 幅 
有 限 ， 所 以 就 不 再 一 一 分 析 了 。 

第 8 步 ， 分 析 D 区 里 面 <ul class="nav cf"> 的 结构 和 样式 。 

D 区 为 网 站 的 版 权 信 息 区 域 ， 而 我 们 要 分 析 的 是 <ul class="nav cf"> 这 一 层 。 从 效果 图 得 知 ， 里 
面 的 内 容 可 以 分 为 5 个 部 分 ， 也 就 是 说 先 写 5 个 子 标签 <li class="col">， 设 置 高 度 为 140 像素 ， 宽 度 
为 110 像素 。 右 边框 为 1 像素 灰色 虚线 ， 即 从 效果 图 看 到 的 右边 虚线 分 隔 线 。 设 定 内 外 相关 边 距 等 。 
以 行内 的 方式 显示 。 当 然 最 重要 的 是 左 浮 动 ， 这 样 5 on eine 

同时 , 前 面 4 个 结构 是 一 样 的 , 只 要 分 析 其 中 一 个 , 其 他 的 可 以 以 此 类 推 。 先 在 里 面 写 一 个 <h3>， 
放 相 关 的 小 标题 ， 如 第 一 个 放 “ 用 户 帮 助 >”， 宽 为 110 像素 ， 字 体 大 小 为 14 像素 。 接 着 写 一 个 <ul 
class="sub-list">， 同 样 宽 为 110 像素 ， 上 外 边 距 为 5 像素 。 接 着 里 面 有 多 少 行文 字 就 写 多 少 个 <1i>， 
如 第 一 个 有 4 行文 字 , 则 写 4 个 <li>,， 设 其 行 高 为 20 像素 。 前 面 的 装饰 为 圆 点 ， 即 list-style-type:disc， 
并 且 在 里 面 显 示 ， 即 list-style-position : inside。 

最 后 一 个 <l 谊 是 网 站 的 logo。 其 实现 办 法 是 在 里 面 写 一 个 <a> 标 签 , 宽 为 200 像素 , 高 为 43 像素 ， 
以 块 状 的 方式 显示 ， 并 且 滋 出 来 的 隐藏 。 通 过 缩 进 -99995 像素 ， 把 文字 隐藏 起 来 ， 再 连接 一 张 logo 
背景 图 片 即 可 ， 同 时 用 外 边 距 调节 一 下 其 显示 的 位 置 ， 如 图 15.22 所 示 。 


每 天 团购 一 次 
六 四 meituan.com 




















记 浮动， 以 行内 的 方式 显示 。 其 中 第 1 1 到 味 个 结构 
相同 的 ， 即 在 里 面 再 写 一 个 <h3> 放 标题 ， 不 面 的 列表 则 
写 在 <ul class="sub-list"> 里 面 。 而 第 5 个 < I> 里 面 则 写 1 个 
<a> 标 签 ， 连 接 logo 背 景 图 即 可 。 






图 15.22 ”<ul class="nav cf"'> 的 结构 分 析 
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结构 代码 如 下 。 


<ul class="nav cf"> 
<li class=col> 
<h3> 用 户 帮 助 </h3> 
<ul class=sub-list> 
<li><a> 玩 转 美 团 </a></li> 
<]li><a> 常 见 问题 </a></li> 
<]li><a> 邮 箱 白 名 单 设置 </a></li> 
<li><a> 开 放 API</a> </li> 
</ul> 
< 中 > 
<li class=col></li> <!-- 获 取 更 新 --> 
<li class=col></li> a 
<]i class=col></li> ”<!-- 公 司 信 息 --> 
<]i class="col logo"><a> 美 团 网 </a> </li> 
</ul> 





从 上 面 的 结构 代码 和 说 明 图 可 以 看 到 ， 其 结构 是 很 清楚 的 ， 下 面 再 写 出 样式 代码 即 可 。 


.Cf { zoom: 1 } 

.cf:after { display: block: height: Opx: visibility: hidden: clear: both: overflow: hidden: content: " } 

/# 这 里 为 .cf 写 了 一 个 伪 类 */ 

#ft .nav { background: #222: color: #666 } 

#ft .nav li.col { margin: 10px Opx: width: 110px; display: Inline: float: left: height: 140px: border-right: #333 lpx 


dashed; padding: 10px Opx Opx SOpx; } 


url(background.png?v=20110413) 0px -220px; height: 43px: overflow: hidden } 


相信 读者 目 己 也 可 以 完成 ， 所 以 这 里 就 不 再 做 更 多 分 析 了 。 


/# 上 下 外 边 距 为 10 像素 ， 左 右 为 0， 以 行内 的 方式 显示 ， 左 浮动 ， 右 边框 为 1 像素 灰色 虚线 */ 
#ft .nav li.logo { border-style: none; } 
#ft .nav li.logo a { text-indent: -9999px: margin: 40px Opx Opx 10px; width: 200px; display: block: background: 


/# 文 字 缩 进 -9999 像素 ， 宽 为 200 像素 ， 以 块 状 的 方式 显示 ， 背 景 图 不 重复 ， 溢 出 来 的 隐藏 */ 
#ft .nav h3 { color: #666;: font-slze: 14px:; wldth:110px: text-align:left: } 

#ft .sub-list { margin-top: Spx; font-size: 12px; width:]10px; } 

#ft .sub-list 1 { list-style-position: Inslde: line-height: 20px: list-style-type: disc: text-align:left: } 

/# 列 表 的 样式 类 型 为 原型 ， 显 示 的 位 置 在 里 面 ， 行 高 为 20 像素 ， 居 左 对 齐 */ 


第 9 步 ， 完 成 网 站 其 他 地 方 页 面 的 设计 。 
篇 幅 有 限 ， 上 和 面 几 步 只 是 对 网 站 的 重点 和 要 扣 做 了 分 析 ， 只 要 把 上 和 面 的 内 容 分 析 透 彻 ， 剩 下 的 
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掘 客 类 型 网 站 的 布局 与 设计 


掘 客 类 网 站 其 实 就 是 一 个 文章 投票 评论 站 点 ， 它 结合 了 书签、 博客 、RSS 以 及 无 等 级 的 评 
论 控制 。 这 类 网 站 的 独特 性 就 在 于 它 没 有 职业 网 站 编辑 ， 编 辑 全 部 来 源 于 用 户 。 用 户 可 以 随意 
提交 文章 ， 然 后 由 阅读 者 来 判断 该 文章 是 否 有 用 ， 收 藏 文章 的 用 户 人 数 越 多 ， 说 明 该 文章 越 有 
热点 。 用 户 认 为 这 篇 文章 不 错 ， 收 藏 或 点 击 量 到 一 定 的 程度 ， 那 么 该 文章 就 会 出 现在 首页 或 者 
其 他 页 面 上 。 

下 面 是 一 些 典 型 的 掘 客 类 网 站 : 新 蓝 房 产品 地 客 (http://fangchan.cztv.com/， 如 图 16.1 所 示 )、 
至 酷 掘 客 网 (http:/dig.gku.cn/)、 奇 客 发 现 (http://www.diglog.com/， 如 图 16.2 所 示 )、 掘 客 手 机 论坛 
(Chttp:/www.ppc-rom.com/)、 天 水 掘 客 网 (http:/www.dig7.cn/) 和 校园 掘 客 (http:/www.9idig.cony )。 
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图 16.1 品 地 客 图 16.2 奇 客 发 现 
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16.1 产品 策划 


掘 客 网 站 与 博客 一 样 ， 网 站 的 主体 内 容 都 是 以 文章 为 主 的 文字 信息 ， 故 设计 时 应 尽 可 能 多 地 考 
虑 到 这 样 的 特点 ， 怎 样 把 文章 分 门 别 类 地 安排 好 展示 给 大 众 才 是 最 重要 的 。 

既然 跟 博 客 是 同一 类 别 的 网 站 ， 因 此 基本 上 都 是 以 两 列 多 行 的 方式 布局 ， 如 图 16.3 所 示 ， 当 然 
1 列 多 行 也 是 不 错 的 选择 ， 如 图 16.4 所 示 ， 还 可 以 是 3 列 多 行 ， 如 图 16.5 所 示 。 


一 一 一 一 一 
| | | | [| | 
图 16.3 两 列 3 行 布局 图 16.4 1 列 多 行 布局 图 16.5 3 列 多 行 布局 

本 案例 单 从 设计 的 角度 来 说 也 能 让 人 感觉 到 是 Web 2.0 网 络 时 代 的 产物 。 

首先 是 网 站 头 部 ， 用 了 一 幅 很 有 时 代 气 恩 同 时 又 很 有 漫画 色彩 的 背景 图 ， 再 者 logo 也 设计 得 很 
有 诗意 。 加 上 右边 网 站 导航 等 相关 操作 的 设计 。 整 个 头 部 看 似 出 人 意料 却 又 在 情理 之 中 。 

再 认真 分 析 ， 整 个 头 部 只 有 3 种 颜色 : 黑色 、 白 色 和 灰色 。 但 通过 相互 之 间 的 搭配 和 灰色 不 同 
程度 的 提炼 使 用 ， 设 计 得 却 如 此 出 色 和 恰如其分 。 由 此 得 出 设计 不 在 于 颜色 使 用 的 多 少 ， 而 在 于 对 
每 一 种 颜色 的 使 用 和 把 握 的 能 

从 整个 页 和 面 来 看 ， 页 和 面 以 灰色 和 白色 为 主 色 调 ， 这 也 很 好 地 上 暗示 给 浏览 者 这 是 一 个 理性 和 人 退 求 
真知 灼 见 的 地 方 ， 正 好 表现 了 网 站 的 主旨 思想 。 

为 了 避免 过 于 采 板 ， 网 站 还 用 了 几 个 其 他 色相 的 颜色 作为 点 级 。 在 “ 掘 客 热点 ”和 下 面 主 要 内 
容 区 域 每 个 栏目 的 投票 票数 都 用 了 很 鲜明 的 深蓝 色 和 青 蓝 色 。 这 些 作 为 网 站 很 重要 的 点 ， 颜 色 虽 鲜 
明 ， 上 所 占 空 间 却 很 少 ， 不 但 不 会 使 网 站 显得 浮躁 ， 相 反 在 大 面积 灰色 背景 的 衬托 下 ， 整 个 网 站 都 显 
得 沉稳 又 有 灵性 。 

另外 ， 网 站 的 布局 更 是 有 有目共睹 ，3 行 两 列 的 排版 方式 ， 更 巧 的 是 为 了 稍微 打破 这 种 千篇一律 的 


格局 ， 在 网 站 主体 内 容 开 始 的 头 部 就 用 了 类 似 选 项 卡 的 设计 。 蓝 色 还 延伸 到 主体 内 容 区 域 里 面 来 。 
可 见 网 站 的 布局 也 是 匠心 独 运 的 。 


16.2 ”画板 和 设计 
根据 策划 的 基本 思路 , 在 产品 设计 时 , 本 案例 在 准确 表达 内 容 的 基础 上 可 以 适当 展示 一 些 Web2.0 
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整个 网 站 包括 如 图 16.6 所 示 的 网 站 logo、 导 航 栏 和 站 内 搜索 、 栏 目 切 换 、 网 站 主 
热门 标签 、 网 站 相关 和 版 权 信 息 等 版 块 内 容 。 
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网 站 效果 图 
根据 这 些 模块 ， 初 步 在 稿 纸 上 画 出 页 和 面 布局 的 草图 ， 如 图 16.7 所 示 。 
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16.7 网 站 草图 
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通过 草图 对 将 要 制作 的 页 面 进行 初步 分 析 ， 使 整个 页 面 大 体 有 一 个 轮廓 。 现 在 就 可 以 通过 
Photoshop 设计 效果 图 了 。 
第 1 步 ， 局 动 Photoshop， 新 建文 档 ， 设 置 文档 大 小 为 1002 像素 X1200 像素 ,分辨 率 为 96 像素 ， 站 
/英寸 ， 然 后 保存 为 “设计 图 .psd”。 借 助 辅助 线 设计 出 网 站 的 基本 轮廓 ， 如 图 16.8 所 示 。 
20 Nt OD 和 tb | 加 口 ” ne | 当 愉 各 | 硬 " 再" 
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16.8 设置 辅助 线 
第 2 步 ， 新 建 “ 线 框图 ”图 层 ， 使 用 绘图 工具 绘制 页 面 的 基本 相框 和 背景 ， 如 图 16.9 所 示 。 
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16.9 ”绘制 页 面 线 框 
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第 3 步 ， 在 线 框 的 基础 上 进一步 细 化 栏目 形 
形式 ， 如 图 16.10 所 示 。 
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图 16.10 版 块 划分 图 


16.3 切 图 和 输出 


上 面 的 工作 完成 之 后 ， 接 下 来 就 是 切 图 了 。 切 图 的 目的 是 找 出 设计 图 中 有 用 的 区 域 ， 包 括 使 用 


CSS 无 法 实现 的 效果 和 可 以 重复 显示 的 效果 。 


第 1 步 ， 纵 观 全 图 ， 看 看 哪些 是 要 切 下 来 做 图 片 或 背景 的 ， 做 背景 要 怎么 切 ， 等 等 。 做 到 心里 


有 数 ， 然 后 就 可 以 切 图 了 。 首 先是 网 站 的 logo， 这 
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这 里 切割 为 背景 透明 的 PNG 图 片 。 同 时 把 网 站 头 部 
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很 大 、 很 潮 的 Logo 作为 一 张大 背景 图 也 切割 下 来 ， 如 图 16.11 所 示 。 
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图 16.11 切割 网 站 logo 和 头 部 背景 
第 2 步 ， 网 站 主体 区 域 ， 即 文章 栏目 左边 的 投票 数 和 投票 操作 的 背景 图 ， 切 制 如 图 16.12 所 示 。 
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图 16.12 ”切割 投票 数 和 投票 操作 的 背景 图 


第 3 步 , 网 站 侧 栏 浅 蓝 色 背 景 图 因为 有 圆 角 效果 , 单纯 用 样式 实现 不 了 , 故 切割 下 来 , 如 图 16.13 
所 示 。 














图 16.13 ”网 站 侧 栏 的 背景 图 片 
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剩 下 大 部 分 边框 都 是 简单 的 单 色相 框 ， 可 以 通过 CSS 实现 ， 故 没有 必要 进行 切割 。 
第 4 步 ， 将 图 片 存储 为 Web 和 设备 所 用 格式 。 具 体操 作 方法 读者 可 查看 前 面 章节 的 相关 内 容 ， 
。 这 里 不 再 重复 阐述 。 
。 第 5 步 ， 在 images 文件 夹 中 可 以 看 到 所 需要 的 背景 图 像 ， 如 图 16.14 所 示 。 再 根据 需要 将 其 重 
全 名 即 可 


辐 回 忆 


文件 全) 编辑 区 ) 查看 DD 收 丫 息 ) 工具 CI) 家 助 0 


性 -让 | 且 捞 有 XH | 国 - 


甩 作 为 幻灯 片 查 看 
个 联机 订购 照片 





图 16.14 切 图 效果 
164 网 站 重 构 


第 1 步 ， 根 据 设计 版 块 划分 图 的 区 域 进行 划分 ， 局 动 Dreamweaver， 选 择 “ 文 件 ” 一 “新 建 ” 命 
令 ， 弹 出 “新 建文 档 ” 对 话 框 。 新 建立 一 个 空 晶 的 HTML 文档 页 面 ， 并 保存 文件 为 mdex.html。 

第 2 步 ， 编 写 HIML 基本 结构 。 在 编写 结构 时 ， 读 者 应 该 注意 结构 的 垦 套 关系 ， 以 及 每 级 结构 
的 类 名 和 ID 编号， 详细 代码 如 下 。 


<!doctype html> 
<html> 
<head> 
<title> 掘 客 网 </title> 
<meta charset="utf-8"> 
</head> 
<body> 
<div 1d="header"> 

<h2 1d="logo"></h2> 


.524 。 
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<ul class="news-upcoming"></ul> 
<div class="top"></div> 
</div> 
</div> <!-- 中 国 上 海 市 政府 在 英国 举办 大 型 金融 人 才 招 聘 会 end --> 
<div class="pagination"></div> 


</div> <!-- contentbox end --> 
</div> <!-- content-wrap end --> 
</div> <!-- wrap end --> 


<div 1d="footer"> 
<div class="footer-contents"> 
<dl class="last"> </dl> 
</div> 
</div> 
<div class="copyright"></div> 
</body> 
</html> 


再 简化 一 下 代码 ， 以 便 可 以 更 清晰 地 看 到 整个 网 站 的 总 体 结构 ， 到 后 面 做 网 站 布局 的 时 候 我 们 
就 能 做 到 心中 有 数 ， 如 图 16.15 所 示 。 
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16.5 网 站 布局 


通过 上 面 的 网 站 重 构 ， 我 们 大 致 清楚 网 站 的 总 体 结构 了 ， 下 面 就 一 步 步 实 现 整 个 网 站 。 

局 动 Dreamweaver 软件 ， 打 开 上 一 节 中 重 构 的 网 页 结构 文档 index.htm， 然 后 逐步 添加 页 面 的 微 
结构 和 图 文 信息 ， 主 要 包括 段落 、 列 表 、 标 题 ， 以 及 必要 的 文本 和 图 像 内 容 ， 对 于 需要 后 台 上 自动 生 
成 的 内 容 ， 可 以 填充 简单 的 图 文 ， 以 方便 在 设计 时 预览 和 测试 ， 等 设计 完毕 后 ， 再 进行 清理 ， 留 符 
程序 员 添 加 后 台 代 码 。 

第 1 步 ， 新 建 样 式 表 文档 。 
选择 “文件 ”一 “新 建 ” 命 令 ， 创 建 外 部 CSS 样式 表 文 件 ， 保 存 为 style.css 文件 ， 存 储 在 
z images 文件 夹 中 。 选 择 “ 窗 口 ” 一 “CSS 样式 ”菜单 命令 ， 打开 “CSS 样式 ”面板 ， 单 击 “ 附 加 
z 样式 表 ” 按 钮 ， 在 弹出 的 “链接 外 部 样式 表 ” 对 话 框 中 ， 单 击 “ 浏 览 ” 按 钮 ， 找 到 style.css 文件 ， 
z 将 其 链接 到 index.htm 文档 中 ， 最 后 单 击 “ 确 定 ” 按 钮 。 接 着 在 页 面 头 部 添加 如 下 代码 ， 导 入 外 
”部 样式 表 。 


<link rel=stylesheet type=text/css href="i1mages/style.css" media=all> 


第 2 步 ， 初 始 化 标签 样式 。 

在 新 建 的 外 部 样式 表 中 ， 将 要 用 到 的 所 有 元 素 初始 化 ， 确 保 所 有 元 素 在 不 同 浏览 器 下 默认 状态 
是 一 致 的 。 代 码 如 下 ， 有 具体 代码 请 得 看 style.css 文件 头 部 初始 化 。 

* { margin: 0px; padding: Opx; } 

html { min-height: 100%:; height: 100% } 

* html body * { overflow: visible } 

* html iframe { overflow: auto } 

* html frameset { overflow: hidden } 

body { margin: Opx auto: font: 12px arial: background: #ebebeb: color: #414141: padding: Opx } 

Img { border: Opx solid; } 


第 3 步 ， 分 析 A 区 的 网 站 顶部 <div id="topnav"> 的 结构 ( 见 图 16.16) 和 样式 。 

这 是 网 站 头 部 的 右 半 部 分 ， 主 要 是 站 内 搜索 及 网 站 导航 的 相关 内 容 。 首 先 其 最 外 面 的 包含 框 为 
”<div id-"topnav">， 相 对 定位 ， 左 外 边 距 为 335 像素 。 里 面 主要 分 为 4 个 部 分 。 第 1 部 分 为 <form 
| class="horizontal-form">， 上 上 、 右 、 下 、 左 4 边 的 内 边 距 分 别 为 35 像素 、0.5 像素 、0.8 像素 、0.5 像 
， 素 ， 高 为 20 像素 。 里 面 放 相关 的 文字 和 控件 并 设置 相对 应 的 样式 即 可 。 第 2 部 分 为 <div 
”class="navigation-login">， 绝 对 定位 ， 宽 290 像素 ， 右 浮动 。 里 面 写 上 “登录 ”“ 注 册 ” 并 设置 相应 
样式。 第 3、4 部 分 相对 比较 复杂 ， 放 到 下 一 步 分 析 。 
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最 外 面 的 包含 框 为 <div id="topnav">， 相 对 定位 。 站 内 搜索 写 在 <form 
class="horizontal-form'"> 里 面 并 居 左 。<div class="navigation-login"> 为 
“和 作 录 /注册 ”。<div id="pages-nav"> 放 置 “ 掘 客 ” 及 其 后 面 的 内 容 
并 连接 背景 图 等 相关 样式 。<div id="channels-nav"> 放 置 “ 分 类 ”及 

其 他 。 


搜索 登录 。 注册 
氟 客 动 积极 用 户 _ 标 签 去 














分 类 all 错 闻 数码 商 中 翅 车 网 站 
图 16.16 网 站 顶部 <div id="topnav"> 的 结构 分 析 
结构 代码 如 下 。 
<div 1d=topnav> 


<form 1d=header-form-search class=horizontal-form> 
<]label><a> 搜 索 </a></label> 
<input 1d=header-search-keys class=form-text/> 
<Inpnut class=button-01-xs/> 
</form> 
<div class=navigation-login> 
<ul 1d=header-login-links> 
<a class="join 0"><span style="font-size: 12px"> 登 录 </span></a> <a class="join is-signed last 
1"><span style="font-size: 12px"> 注 册 </span></a> </ul> 
</div> 
<div id=pages-nav class=navigation-services></div> ”<!-- 拨 客 及 其 他 --> 
<div id=channels-nav class=navigation-channels></div> ”<!-- 分 类 及 其 他 --> 
</div> 


对 应 的 样式 代码 如 下 。 


#topnav { position: absolute: text-align: night; top: 10px: right: 10px } 

#topnav { position: relative; text-align: left: margin-left: 33Spx: top: auto: right: auto: padding: Opx } 

/# 相 对 定位 ， 左 外 边 距 为 335 像素 ， 文 字 居 左 对 齐 */ 

#topnav div#channels-nav { padding-bottom: 9px; background: url(logo-tail.png) no-repeat 1.Sem 100% } 
form.horizontal-form { padding: 0.8em 0.Sem:} 

form.horizontal-form * { display: nline } 

form.horizontal-form input { line-height: 1.4em: margin: 0em 0.Sem 0em 0em } 

div.navigation-login { position: absolute: width: 290px:; float: right: top: 3Spx: right: Opx } 

证 绝对 定位 ， 离 外 边 杠 上 边 距离 为 35 像素 ， 左 边 则 为 0 像素 ， 宽 为 290 像素 ， 同 右 浮 动 */ 
div.navigation-login ul { padding: 0px: margin: Opx; display: inline; float: nght; } 

div.navigation-login ul li { padding: 2px Spx; line-height: lem:; list-style-type: none: margin: Opx; display: mline; 


er 
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float: left: font-slze: 91.679%0: border-right: #414141 1px solld:} 
# 行 高 为 lam， 以 行内 的 方式 显示 ， 磊 浮动 ， 右 边框 为 1 像素 宽度 的 灰色 实 线 */ 
div.navigation-login ul li.jomn { font-weight: bold } 
div.navigation-login ul li.last { border-right: Opx } 





第 4 步 ， 分 析 <div class="navigation-services"> 的 结构 和 样式 。 

接着 上 一 步 的 分 析 , 第 3 部 分 为 <div class="navigation-services">, 相对 定位 , 以 块 状 的 方式 显示 ， 
里 面 的 内 容 有 多 出 来 的 隐藏 ， 背 景 闫 色 的 值 为 #eff0f0。 里 面 先 写 一 个 <span class="corner-top">， 堆 狼 
顺序 为 0， 绝对 定位 ， 高 为 3 像素 ， 宽 为 100%， 连 接 一 张 背 景 图 。 因 为 CSS 无 法 实现 圆 角 效果 ， 
故 这 里 通过 一 张 背 景 图 来 实现 。 然 后 再 写 一 个 <a class="home"> 连 接 标签 。 以 块 状 的 方式 显示 ， 左 浮 
动 ， 背景 颜色 为 深 灰 色 〈 孝 bbdbf)， 里 面 输入 “ 掘 客 ”并 加 粗 显 示 。 最 后 再 写 一 个 <ul id="header-user- 
links">， 里 面 写 4 个子 标签 <li>。 以 行内 方式 显示 ， 辣 左 浮动 等 。 

第 4 部 分 为 <div class="navigation-channels">， 相 对 定位 ， 宽 为 100%， 以 块 状 的 方式 显示 。 底 内 
边 距 为 9 像素 ， 并 连接 一 张 背 景 图 ， 即 效果 图 中 最 下 面 的 方向 向 下 的 三 角形 。 里 面 先 写 一 个 <ul 
class="primary-links">， 设 置 同 左 浮动 。 再 写 上 7 个 子 标 和 俭 <l>， 行 高 为 em， 以 行内 的 方式 显示 ， 
同 左 浮动 ， 字 体 加 粗 显 示 。 最 后 写 上 <span class="corner-bottom'">， 里 面 连接 一 张 背 景 图 ， 实 现 圆 角 
效果 。 最 后 分 析 如 图 16.17 所 示 。 


概 窜 。 FAQ 互动 积极 用 户 标签 云集 








先 写 一 个 <span class="copne 连接 一 张 背 景 图 实现 圆 角 效果 。 再 
写 上 <div id="pages-nav"> 放 置 “ 掘 客 ” 及 其 后 和 面 的 内 容 并 设置 背景 
颜色 为 浅 灰 色 等 相关 样式 。<div id="channels- nav'"> 放 置 “分 类 ”及 其 
他 ， 设置 至 景 闫 色 为 深 次 色 等 相关 样式 即 可 。 最 后 通过 < span class= 
"corner-bottom"> 连 接 背 景 图 实现 圆 角 效果 。 










图 16.17 <div class="navigation-services"> 的 结构 分 析 


对 应 的 结构 代码 如 下 。 


<div id=pages-nav class=navigation-services> <span class=corner-top><span></span></span> <a class=home> 气 


| 客 </a> 

: <ul 1d=header-user-links> 

<li class="first tool 0"><a class="tool] 0">faq</a></li> 

| <li class="tool 1"><a class="tool 1"><span> 互 动 </span></a></li> 

| <li class="tool 2"><a class="tool 2"><span> 积 极 用 户 </span></a></li> 

: <li class="last tool 3"><a class="tool 3"><span> 标 签 云 集 </span></a></li> 
</ul> 

: </div> 
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<div 1d=channels-nav class=navigation-channels> 
<ul class=primary-links> 
<li class="first title 0"><span class="title 0"> 分 类 </span></li> ES 
<]1><a style="padding-bottom: Spx">all</a></]1> 





<span class=corner-bottom><span></span></span> </div> 


下 面 是 相应 的 一 部 分 样式 代码 。 


div.navigation-services { position: relative; width: 100%:; display: block: background: #eff0f0; float: none; 
overflow: hidden }/* 相 对 定位 ， 宽 为 100%， 以 块 状 的 方式 显示 ， 淤 出 来 的 隐藏 */ 

div.navigation-services ul { padding: Opx; margin: Opx; display: inline; float: none; } 

div.navigation-services ul li1 { padding: Opx; line-height: lem:; list-style-type: none; margin: lpx Opx Opx; display: 
inline; float: left; color: #414141: font-size: 91.67%: font-weight: bold; } 

诬 行 高 为 lem， 同 左 浮动 ， 字 体 大 小 为 91.67 并 加 粗 显 示 */ 

div.navigation-services ul li a { padding: 0.Sem 0.8em; margin: Opx; width: auto; display: block: background: none 
transparent scroll repeat 0% 0%; color: #414141; font-size: lem; font-weight: bold; text-decoration: none; } 

div.navigation-services .corner-top { position: absolute; width: 100%; background-position: -3px -3px; top: Opx; 
left: 0px }/* 绝 对 定位 于 左上 角 ， 宽 为 100%， 背 景 图 片 显示 的 相应 位 置 */ 

div.navigation-services .corner-top span { background-position: Opx -S57px } 

div.navigation-channels { position: relative; width: 100%; display: block: float: none: overflow: hidden } 

div.navigation-channels ul { padding: 0px: margin: Opx:; width: 100%: display: inline; background: #414141: float: 
left; } 和 # 内 外 边 距 都 为 0 像素 ， 以 行内 的 方式 显示 ， 同 左 浮动 */ 

div.navigation-footer .corner-bottom { margin: Opx; background-position: -3px -12px } 

div.navigation-footer .corner-bottom span { background-position: Opx -12px } 


第 5 步 ， 编 写 B 区 <div id="nav"> 的 结构 和 样式 代码 。 

下 面 分 析 网 站 主体 部 分 栏目 的 标题 区 域 。 最 外 层 的 包含 框 为 <div id="nav">， 设 置 高 为 40 像素 ， 
居 左 对 齐 ， 里 面 的 文字 大 小 为 14 像素 。 然 后 写 一 个 层 <div class="navigation-main'" id="nav main'">， 
癌 左 浮动 ， 内 容 洲 出 来 的 隐藏 。 接 着 写 一 个 无 序列 表 <ul class="primary">， 回 左 浮动 ， 以 行内 的 方式 
显示 。 上 左 外 边 距 为 10 像素 、15 像素 。 

在 标题 区 域 里 面 先 写 3 个 子 标签 <l>， 行 高 为 l em， 去 掉 其 前 面 的 小 圆 点 样式 ， 宽 为 10.Sem， 
以 行内 的 方式 显示 ， 同 时 背景 颜色 为 接近 黑色 的 灰色 。 同 左 浮动 ， 字 体 颜 色 则 为 白色 并 加 粗 。 其 中 
第 一 个 为 当前 正在 展示 的 ， 故 为 其 设置 一 个 类 <li class="active">， 设 置 背 景 颜 色 为 监 色 。 

然后 后 面 再 写 4 个 <a> 链 接 标签 ， 放 置 后 面 的 4 个 文字 链接 ， 其 中 第 1 个 “全 部 ”连接 一 张 背 景 
图 等 相关 样式 即 可 。 整 个 区 域 分 析 如 图 16.18 所 示 。 


aie 








全 污 新 闻 视频 音频 













最 外 和 面 的 包含 框 为 <div 计 


里 面 写 1 个 <ul class="primary 空 并 设置 向 堪 浮 动 。 


en 
为 黑色 。 后 面 再 写 上 4 个 <as 称 签 ， 放 置 后 面 的 文字 导航 。 
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图 16.18 <div id="nav"> 的 结构 分 析 


结构 代码 如 下 。 


<div style="text-align: left: height: 40px: font-slze: 14px" 1d=nav> 
<div 1d=nav main class=navigation-main> 
<ul class=primary> 
<li class=active><a class=active><span> 气 客 热 点 </span></a></li> 
<]i><a class=active><span> 文 章 队 列 </span></a></li> 
<]i><a class=active><span> 添 加 新 文章 </span></a></li> 
<a style="background-image: url(images/backew.png); width: 40px; height: 40px"> 全 部 </a> 
&nbsp: &nbsp; 新 闻 &nbsp:; &nbsp; <a> 视 频 </a>&nbsp; &nbsp: 音频 
</ul> 
</div> 
</div> 


样式 代码 如 下 所 示 。 


div.navigation-main { position: absolute; line-height: 0; width: 100%: bottom: Opx; display: inline; float: left; 
overflow: hidden } 

div.navigation-main ul { padding: 0px: margin: 10px Opx Opx 15px; display: nline; float: left: } 

div.navigation-main ul li { padding: Opx: line-height: lem: list-style-type: none: margin: Opx Spx Opx Opx; width: 
10.5em: display: inline: background: #414141: float: left: color: #fff: font-size: 91.67%:; font-weight: bold:; }/* 行 高 
lem， 宽 10.5em， 行 内 显示 ， 问 左 浮动 ， 字 体 大 小 91.67% 并 加 粗 */ 

div.navigation-main ul li.active { background: #247cd9:; color: #ffffff } 

div.navigation-main ul li a { text-align: center; padding: 0.Sem: margin: Opx:; display: block: background: none 
transparent scroll repeat 0% 0%: color: #ffffff: font-size: lem:; font-weight: bold: text-decoration: none;} 

谍 居 左 对 齐 ，4 边 的 内 边 距 为 05.em， 以 块 状 的 方式 显示 ， 没 有 连接 背景 图 片 */ 

div.navigation-main ul li.active a { background: none transparent scroll] repeat 0% 0%:; color: #ffffff } 


第 6 步 ， 分析 B 区 <div class="news-summary"> 的 框 体 结构 ， 如 图 16.19 所 示 。 
从 效果 图 中 我 们 知道 网 站 的 主要 内 容 都 是 由 一 个 一 个 模块 组 合 起 来 的 ， 故 只 要 分 析 其 中 一 个 模 


块 即 可 。 这 里 选择 “巴黎 之 夜 ” 来 分 析 。 
首先 最 外 和 面 的 包含 框 为 <div class="news-summary">, 相对 定位 , 底 内 边 距 为 10 像素 , 宽 为 100%， 


“i 
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清除 两 边 的 浮动 。 里 面 为 了 得 到 圆 角 效果 ， 先 写 一 个 <b class="roundbar">， 以 块 状 的 方式 显示 。 然 后 
里 面 写 了 5 个 <b> 标 签 。 第 1 个 <b> 左 右 内 边 距 为 1 像素 ， 左 右 外 边 距 为 3 像素 ， 背 景 颜色 为 灰色 ， 
高 为 1 像素 ， 左 右边 框 为 1 像素 的 灰色 实 线 。 第 2 个 <b> 其 他 不 变 ,左右 外 边 距 设 为 1 像素 。 第 3 个 
<b> 在 第 2 个 的 基础 上 内 边 距 设 为 0 像素 。 第 4 个 <b> 则 在 第 3 个 的 基础 上 外 边 距 设 为 0 像素。 第 5 
个 <b> 同 第 4 个 做 同样 的 设置 。 这 样 通过 层 层 的 设置 实现 圆 角 效果 。 

然后 写 一 个 层 <div class="roundbarfg"> ， 背 景 颜色 同样 为 灰色 。 里 面 先 写 一 个 无 序列 表 <ul 
class="news-upcoming">， 绝 对 定位 ， 离 外 边框 上 边 距离 为 8 像素 ,左边 的 距离 为 6 像素 ， 居 左 对 齐 ， 
宽 为 55 像素 ， 局 为 80 像 系 ， 最 后 连接 一 张 背 景 图 。 接 看 里 面 写 3 个 子 标签 <i>， 第 1 个 < 
class="vote-publish"> 设 置 字体 大 小 为 24 像素 ， 行 高 为 35 像素 ， 上 下 两 边 的 内 边 距 为 15 像素 和 6 像 
素 。 第 2 个 和 第 3 个 <li class="vote" id="xvote-6"> 帘 为 55 像素， 居中 对 齐 。 

接着 <div class="top"> 放 这 里 的 主要 内 容 ， 我 们 将 在 下 一 步 分 析 。 最 后 写 <b class="roundbar">， 
完成 圆 角 效果 ， 步 又 刚好 和 前 面 分 析 的 相反 。 














ji | #4 对 定位 , 下 内 边 距 为 10 像 素 。 里 
面 先 在 最 前 和 最 后 于 上 一 个 <W class='"news-ufcoming' 人 > 标签 <b class="roundbar' 人 > 来 
实现 圆 角 效果 。 然后 在 中 间 写 一 个 放 这 里 的 投票 数 和 投票 按钮 , 并 连接 一 张 背 景 图 。 
接着 再 写 一 个 层 <div class="top"A， ， 用 于 放 这 里 的 主要 内 容 。 












图 16.19 <div class="news-summary"> 的 框 体 结构 


具体 结构 代码 如 下 。 


<div 1d=xnews-6 class=news-summary> <b class=roundbar> <b class=roundbarl><b></b></b><b class=roundbar2> 
<b></b></b> <b class=roundbar3></b><b class=roundbar4></b> <b class=roundbar$></b></b> 
<div class=roundbarfg> 
<ul class=news-upcoming> 
<l1 style="margin: Opx auto" class=vote-publish><a>3</a></l1> 
<li id=xvote-6 class=vote><a> 投 票 </a></li> 
<li id=xvote-6 class=vote><a style="color: #979797"> 投 票 </a></li> 
</ul> 
<div class=top></div> 
</div> 
<b class=roundbar><b class=roundbarS></b><b class=roundbar4></b> <b class=roundbar3></b><b class= 


roundbar2> <b></b></b> <b class=roundbarl><b></b></b></b> </div> 


下 面 是 CSS 样式 代码 。 
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《sss1DI0 网 页 样式 名 布局 以 入 门 到 精通 ( 微 梨 精 编 版 ) 


.news-summary { position: relative; wldth: 100%; clear: left: padding: 1px Opx 10px } 

.Toundbar { display: block } 

.Toundbar * { display: block: background: #ebebeb: height: 1px; font-slze: 12px; overflow: hidden } 

席 以 快 转 的 方式 显示 ， 背 景 颜色 为 灰色 ， 高 为 1 像素 ， 洲 出 来 隐藏 */ 

-Toundbarl { border-left: #f]flfl lpx solid:; padding:0px lpx:; background: #ebebeb; margin:0px 3px; border-right: 
#f1flfl] lpx solid } 

-Toundbar2 { border-left: #f]lflfl] lpx solid:; padding:0px lpx:; background: #ebebeb: margin:0px 3px:; border-right: 
#f1flfl lpx solid } 

证 左右 边框 为 1 像素 的 灰色 实 线 ， 背 景 颜色 为 灰色 ， 左 右 内 边 距 为 1 像素 ， 左 右 外 边 距 为 3 像素 */ 

.Toundbar3 { border-left: #ebebeb lpx solld; margin:0px 1px: border-right: #ebebeb lpx solid } 

.Toundbar4 { border-left: #f1f1f] 1px solid:; border-right: #f1fl1f]l lpx solid } 

.ToundbarS { border-left: #ebebeb lpx solid:; border-right: #ebebeb lpx solid } 

.vote-publish a { paddimg:1Spx Opx 6px Opx; line-height: 35px; letter-spacing: -1px; font-slze: 24px; text-decoration: 
none; }/* 上 下 内 边 15 像素 和 6 像素 ， 行 高 35 像素 ， 去 掉 文 字 的 下 划 线 */ 


第 7 步 ， 接 上 一 步 分 析 <div class="top"> 的 框 体 结构 ， 如 图 16.20 所 示 。 

接着 上 一 步 分 析 栏 目 里 面 主 要 内 容 的 结构 和 样式 。 这 里 最 外 边 的 包含 框 为 <div class="top">， 左 
外 边 距 为 60 像素 ， 里 面 主 要 分 为 5 个 层 。 第 1 个 层 为 <div>， 放 置 效果 图 ， 最 右边 的 头像 图 片 设置 
为 有 浮动 。 第 2 个 层 为 <div class="toptitle">, 放置 这 里 文章 的 标题 “巴黎 之 夜 ”, 设置 字体 为 16 像素 。 
第 3 个 层 为 <div class="news-submitted">， 底 外 边 距 为 3 像素 ， 字 体 大 小 为 85%。 里 面 的 文字 信息 分 
别 写 在 <a> 或 者 <span> 里 面 ， 并 写 上 相对 应 的 样式 即 可 。 这 里 就 不 再 详细 阐述 。 第 4 个 层 为 <span 
class="news-body-text">， 宽 为 200 像素 ， 上 下 内 边 距 为 10 像素 ， 左 内 边 距 为 40 像素 ， 字 体 大 小 为 
110%， 里 面 的 “更 多 ” 则 加 粗 显示 。 第 5 个 层 为 <span class="news-details">， 用 于 放置 对 文章 相关 操 
作 的 文字 或 图 片 链接 ， 读 者 可 以 参考 下 面 的 结构 和 样式 代码 。 


<div classxstop 必 为 最 外 证 的 包含 长， 里 和 面 分 为 5 个 层 。<div> 放 最 后 边 的 头像 
图 片 , 右 浮动 、<div class='"toptitle"> 放 文章 的 标题 ， 字 体 大 小 为 16 像 素 。<div 
class="news-submitted'"> 放 文章 的 相关 信息 。<span class="news-body-text" 全 则 放 
区 便 的 一 部 分 文字 。 最 后 ，<span class="news-details"> 为 对 文章 的 相关 操作 连接 。 





图 16.20 ”<div class="top"> 的 框 体 结构 


结构 代码 如 下 。 


. 534 。 


第 1]10 章 据 客 类 型 网 站 的 市 局 与 设计 





<div class=top> 
<div style="float: right: margin-right: Spx"><1mg src=""></d1v> 
<div id=]s thetitle-6 class=toptitle><a> 巴 黎 之 夜 </a> </div> 会 必 
<div class=news-submitted> <a><span 1d=]s avatar-6><1i1meg src=""></span></a> <span 1d=1s posted by-6> 





发 表 由 </span> <a><span id=ls link submitter-6></span></a> <span id=]s timeago-6> 天 数 之 前 </span> <span 
id=]s story link-6></span> <span id=ls tags-6><b><a> 标 签 </a></b>:</span> </div> 
<span class=news-body-text><a> 更 多 </a> <br> 


No 


</span> <span class=news-details> <span id=ls_ comments url-6> <img src=""> <a class=comments > 讨论 
</a> &nbsp; </span> <img src=""> <a> 添 加 到 </a>&nbsp; <span id=]s_recommend-6> <img src=""> <a> 告 诉 给 朋友 


</a> &nbsp; </span> </span> </div> 


样式 代码 如 下 。 


.top { padding-bottom: Opx; padding-left: Spx; padding-right: Opx:; margin-left: 60px; padding-top: Opx } 
.news-submitted { margin-bottom: 3px; color: #999999: font-slze: 85% } 

.news-submitted a { color: #999; text-decoration: underline } 

.news-submitted a:hover { text-decoration: none } 

.news-submitted Img { z-index: 1; position: relative; margin-top: 6px; float: left; margin-right: 10px } 
人 # 堆 登 顺 序 为 1， 相 对 定位 ， 上 右 外 边 距 为 6 像素 和 10 像素 ， 回 左 浮动 对 

.news-body-text { margin: 10px Opx 0px: width: 200px: padding-right: 40px: font-slze: 110% } 

/# 上 外 边 距 为 10 像素 ， 宽 为 200 像素 ， 右 内 边 距 为 40 像素 ， 字 体 大 小 为 110%*/ 
.news-body-text a:link { color: #666666;: font-weight: bold; text-decoration: none } 

.news-body-text a:visited { color: #666666; font-weight: bold; text-decoration: none } 

.news-details { margin: Opx; font-size: 85% } 

.news-details a:link { color: #626262: text-decoration: none } 

.news-details b { color: #c00 } 

* html .news-detalls { padding-right: 136px } 


第 8 步 ， 编 写 C 区 <div class="featurebox"> 的 结构 和 样式 。 

下 面 分 析 的 是 侧 栏 的 “分 类 ”栏目 ， 该 栏目 最 外 面 的 包含 层 为 <div class="featurebox">， 下 外 边 
距 为 15 像素 ， 上 左 内 边 距 则 为 15 像素 和 10 像素 。 连 接 一 张 背 景 图 。 这 里 面 主 要 分 为 3 个 层 ， 第 1 
个 层 为 <div class="tlb">， 上 、 右 、 下 、 左 4 边 的 内 边 距 分 别 为 3 像素 、10 像素 、5 像素 和 10 像素 。 
而 上 右 外 边 距 为 -15 像素 和 -10 像素 。 里 面 先 写 一 个 <span> 标 签 ， 里 面 放置 一 个 方 同 同 下 的 小 稍 头 图 
标 图 片 ， 并 设置 为 癌 右 浮动 。 而 标题 则 写 在 一 个 <a> 里 面 ， 大 小 为 14 像素 并 加 粗 显示 。 

第 2 个 层 为 <div id="s1">， 放 置 这 里 的 段落 文字 ， 设 置 字体 大 小 为 12 像素 ， 颜 色 为 赣 色 。 第 3 
个 层 为 <div class="tlb2" id="maintab">， 下 内 边 距 为 20 像素 ,里面 先 写 两 个 <span> 标 签 ， 放置 这 里 的 
“登录 “注册” 文字 ， 设 置 为 居中 对 齐 ， 宽 为 60 像素 ， 高 为 21 像素 ， 以 块 状 的 方式 显示 ， 辣 左 浮 
动 ， 字 体 颜 色 为 白色 ， 鼠 标 指针 以 手 形 的 方式 显示 ， 右 外 边 距 为 8 像素 ， 最 后 分 别 连接 一 张 颜色 深 
浅 不 同 的 背景 图 。 而 “更 多 ” 则 写 在 一 个 <a> 标 签 里 面 并 设置 有 浮动 即 可 ， 如 图 16.21 所 示 。 
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2.0 社区 网 站 ， 包括 六 三 曾 、 论 坛 三 昼 <div class="featurebox'> 为 这 里 最 外 层 的 包 
分 。 据 客 .com 的 主要 运行 机 制 和 访 论 ~ 含 框 ， 上 左 内 边 距 分 别 为 15 像 素 和 10 像 素 。 连 


亚 霹 ”本 中 接 一 张 背 景 图 。 里 面 分 为 3 个 层 : <div 
1. 所 有 也 章 由 用 尸 提 让 ， 由 用 尸 架 据 ， 梭 class—"tlb 吃 放 这 里 的 标题 “分 类 ”。<div 


笋 越 多 的 区 和 章 将 显示 在 首 贝 :一 id="s1'> 放 这 里 的 段落 文字 ,字体 大 小 为 12 
2 网 络 书签 功能 。 用 户 资料 中 包括 了 每 位 用 像素 ， 蓝 色 。<div_ class="tlb2"> 下 内 边 距 为 
提 谈 的 所 有 信息 ; 而 且 对 应 的 每 一 项 均 有 再 写 二 个 <span> 标 笠 连 接 相 应 


输出 。 ，“ 更 多 ” 放 在 <a> 标 签 里 面 。 


注册 人 


图 16.21 <div class="featurebox"> 的 结构 


结构 代码 如 下 。 


<div class=featurebox> 
<div class=tlb><span><a><img src=""></a></span> <a> 分 类 </a> </div> 
<div 1d=s1> 
<div class=tog></div> 
</div> 
<div id=maintab class=tlb2> <span><a style="text-decoration: none"> 注 册 </a></span> <span 
class=selected><a style="text-decoration: none"> 登录 </a></span> &nbsp:&nbsp:&nbsp:&nbsp:;<a><b> 更 多 …… 
</b></a> </div> 
</div> 


具体 样式 代码 如 下 。 


.featurebox { margin: Opx Opx 15px; background: url(featurebox bg.png) no-repeat 100% 100%; color: #247cd4:; 
padding: 15px 0 0 1Spx } 

.featurebox p { border: medium none; margin: Opx Opx lem:; color: #444:;} 

.featurebox a { color: #247cd4; text-decoration: none } 

.featurebox a:hover { color: #666666; text-decoration: underline } 

.featurebox li a { line-height: 2em; padding-left: 20px; margin-left: -10px } 

.featurebox ul { margin-bottom: 10px:; margin-left: 10px } 

.featurebox ul a { margin-bottom: Spx } 

tlb { margin: -1Spx -10px Opx:; background: url(featurebox h.png) no-repeat Opx Opx; padding: 3px 10px Spx 
10px }/* 上 右 内 边 距 值 分 别 为 -1Spx 和 -10px， 背 景 图 不 重复 ， 上 右 下 左 4 边 内 边 距 值 分 别 为 3px、10px、5px、 
10px， 以 调整 内 容 显 示 位 置 */ 

.tlb2 { padding-bottom: 20px: margin: Spx Opx Opx; } 

.tlb2 span a { text-align: center; width: 60px: display: block: background: url(exp on.png) no-repeat Opx Opx; 


* 59306。 


第 1]10 章 据 客 类 型 网 站 的 市 局 与 设计 





float: left; height: 21px: color: #ffffff; cursor: pointer; margin-right: 8px; padding-top: 2px } 
人 # 居 中 对 齐 ， 宽 60 像素 ， 以 块 状 方式 显示 ， 背 景 图 片 不 重复 ， 鼠 标 指针 以 手 形 的 方式 显示 */ 
.tlb2 span.selected { text-align: center; color: #666; cursor: text:; font-welght: bold } 





.tlb2 span.selected a { text-align: center: width: 60px; display: block: background: url(exp down.png) no-repeat 
Opx Opx;: float: left: height: 21px: color: #666;:; cursor: text: font-weight: bold:; margin-right: 8px: padding-top: 2px } 





D 区 的 页 脚 版 权 信息 样式 比较 简单 ， 这 里 不 再 分 析 。 | 
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循序 渐进 ， 实 战 讲述 

375 个 应 用 实例 ，32 小 时 视频 讲解 ， 基 础 知识 一 核心 技术 一 高 级 应 用 一 项 目 实战 
海量 资产， 可 查 可 练 

@ 实例 资源 库 e 模块 资源 库 @ 项 目 资源 库 

@ 测试 题库 ” @ 面试 资源 库 @ PPT 课 件 

(以 《Java 从 入 门 到 精通 (第 4 版 )》 为 例 ) 


软件 项 目 开发 全 程 实录 | 






PHP 


项 目 开 发 全 程 实录 


Java 


项 目 开发 全 程 实录 





ASP.NET 


项 目 开发 全 程 实录 


@ 当前 流行 技术 +10 个 真实 软件 项 目 + 完 整 开 发 过 程 
@ 94 集 教学 微 视频 ， 手 机 扫 码 随时 随地 学 习 

@ 160 小 时 在 线 课 程 ， 海 量 开 发 资源 库 资源 

e 项 目 开 及 快 用 思维 导 图 

(以 《yava 项 目 开发 全 程 实录 (第 4 版 ) 》 为 例 ) 


